text-indent bug (bugs.jqueryui.com isn't working for me)

text-indent bug (bugs.jqueryui.com isn't working for me)

text-indent: -99999 on icons makes adjacent inline elements disappear too.

To reproduce, view this in IE8 with Browser Mode: IE8 or IE8 compatibility view, and Document Mode: Quirks Mode.

  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"/>
  4.         <style>
  5.             /* "body" required for reproducing bug */
  6.             body .ui-icon-star {
  7.                 background-image: url('/some-url-404');
  8.                 /* either of these will reproduce bug */
  9.                 display: inline-block;
  10.                 display: inline;
  11.             }
  12.             #icon-line     { border: 1px solid red; }
  13.             #icon         { border: 1px solid green; }
  14.             #text         { border: 1px solid blue; }
  15.         </style>
  16.        
  17.     </head>
  18.     <body>
  19.         <p>1</p>
  20.         <p id="icon-line">
  21.             <span id="icon" class="ui-icon ui-icon-star"></span>
  22.             <span id="text">2</span>
  23.         </p>
  24.         <p>3</p>
  25.     </body>
  26. </html>

Expected result
: 1, 2, 3 (#text element visible)

Actual result: 1, 3 (#text element not visible)

The issue seems to be in the way IE handles text-indent with adjacent siblings, jQueryUI setting a text-indent: -99999 on the icon adjacent to the text hides both.

Workaround: remove the text-indent,

  1.         <!--[if IE]>
  2.             <style>
  3.                 body .ui-icon { text-indent: 0 !important; }
  4.             </style>
  5.         <![endif]-->

and make sure none of your icons contain text.