title: jQuery UI combobox does not render correctly in IE 9.x?
body: <p>I have a html page based on Combobox autocomplete demo at <a href="http://jqueryui.com/demos/autocomplete/#combobox" rel="nofollow">Combobox jQuery Autocomplete Demo</a>. The problem is that the combobox renders perfectly in FireFox 13.x. However, in IE 9.x (64-bit), it does the autocomplete part correctly, but is strange in appearance as you can see at this link: <a href="http://screencast.com/t/6swMlGAA" rel="nofollow">Strange jQuery Combobox Appearance in IE 9.x</a>. I thought jQuery was the perfect cross-browser technology, but it doesn't look like it. Or may be I am missing something in my html code? The complete html code is as given below.</p>
  
  <pre><code>        &lt;html&gt;
          &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;jQuery UI Example Page&lt;/title&gt;
          &lt;link type="text/css" href="css/cupertino/jquery-ui-1.8.21.custom.css" rel="stylesheet" /&gt;
          &lt;script type="text/javascript" src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"&gt;&lt;/script&gt;
          &lt;style&gt;
          .ui-combobox {
              position: relative;
              display: inline-block;
          }
          .ui-combobox-toggle {
              position: absolute;
              top: 0;
              bottom: 0;
              margin-left: -1px;
              padding: 0;
              /* adjust styles for IE 6/7 */
              *height: 1.7em;
              *top: 0.1em;
          }
          .ui-combobox-input {
              margin: 0;
              padding: 0.3em;
          }
          &lt;/style&gt;
          &lt;script type="text/javascript"&gt;
              (function ($) {
                  $.widget("ui.combobox", {
                      _create: function () {
                          var input,
                          self = this,
                          select = this.element.hide(),
                          selected = select.children(":selected"),
                          value = selected.val() ? selected.text() : "",
                          wrapper = this.wrapper = $("&lt;span&gt;")
                              .addClass("ui-combobox")
                              .insertAfter(select);
  
                          input = $("&lt;input&gt;")
                          .appendTo(wrapper)
                          .val(value)
                          .addClass("ui-state-default ui-combobox-input")
                          .autocomplete({
                              delay: 0,
                              minLength: 0,
                              source: function (request, response) {
                                  var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                                  response(select.children("option").map(function () {
                                      var text = $(this).text();
                                      if (this.value &amp;&amp; (!request.term || matcher.test(text)))
                                          return {
                                              label: text.replace(
                                                  new RegExp(
                                                      "(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)(" +
                                                      $.ui.autocomplete.escapeRegex(request.term) +
                                                      ")(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)", "gi"
                                                  ), "&lt;strong&gt;$1&lt;/strong&gt;"),
                                              value: text,
                                              option: this
                                          };
                                  }));
                              },
                              select: function (event, ui) {
                                  ui.item.option.selected = true;
                                  self._trigger("selected", event, {
                                      item: ui.item.option
                                  });
                              },
                              change: function (event, ui) {
                                  if (!ui.item) {
                                      var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                          valid = false;
                                      select.children("option").each(function () {
                                          if ($(this).text().match(matcher)) {
                                              this.selected = valid = true;
                                              return false;
                                          }
                                      });
                                      if (!valid) {
                                          // remove invalid value, as it didn't match anything
                                          $(this).val("");
                                          select.val("");
                                          input.data("autocomplete").term = "";
                                          return false;
                                      }
                                  }
                              }
                          })
                          .addClass("ui-widget ui-widget-content ui-corner-left");
  
                          input.data("autocomplete")._renderItem = function (ul, item) {
                              return $("&lt;li&gt;&lt;/li&gt;")
                              .data("item.autocomplete", item)
                              .append("&lt;a&gt;" + item.label + "&lt;/a&gt;")
                              .appendTo(ul);
                          };
  
                          $("&lt;a&gt;")
                          .attr("tabIndex", -1)
                          .attr("title", "Show All Items")
                          .appendTo(wrapper)
                          .button({
                              icons: {
                                  primary: "ui-icon-triangle-1-s"
                              },
                              text: false
                          })
                          .removeClass("ui-corner-all")
                          .addClass("ui-corner-right ui-combobox-toggle")
                          .click(function () {
                              // close if already visible
                              if (input.autocomplete("widget").is(":visible")) {
                                  input.autocomplete("close");
                                  return;
                              }
  
                              // work around a bug (likely same cause as #5265)
                              $(this).blur();
  
                              // pass empty string as value to search for, displaying all results
                              input.autocomplete("search", "");
                              input.focus();
                          });
                      },
  
                      destroy: function () {
                          this.wrapper.remove();
                          this.element.show();
                          $.Widget.prototype.destroy.call(this);
                      }
                  });
              })(jQuery);
  
              $(function () {
                  $("#combobox").combobox();
                  $("#toggle").click(function () {
                      $("#combobox").toggle();
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="demo"&gt;
              &lt;div class="ui-widget"&gt;
                  &lt;label&gt;
                      Your preferred programming language:
                  &lt;/label&gt;
                  &lt;select id="combobox"&gt;
                      &lt;option value=""&gt;Select one...&lt;/option&gt;
                      &lt;option value="ActionScript"&gt;ActionScript&lt;/option&gt;
                      &lt;option value="AppleScript"&gt;AppleScript&lt;/option&gt;
                      &lt;option value="Asp"&gt;Asp&lt;/option&gt;
                      &lt;option value="BASIC"&gt;BASIC&lt;/option&gt;
                      &lt;option value="C"&gt;C&lt;/option&gt;
                      &lt;option value="C++"&gt;C++&lt;/option&gt;
                      &lt;option value="Clojure"&gt;Clojure&lt;/option&gt;
                      &lt;option value="COBOL"&gt;COBOL&lt;/option&gt;
                      &lt;option value="ColdFusion"&gt;ColdFusion&lt;/option&gt;
                      &lt;option value="Erlang"&gt;Erlang&lt;/option&gt;
                      &lt;option value="Fortran"&gt;Fortran&lt;/option&gt;
                      &lt;option value="Groovy"&gt;Groovy&lt;/option&gt;
                      &lt;option value="Haskell"&gt;Haskell&lt;/option&gt;
                      &lt;option value="Java"&gt;Java&lt;/option&gt;
                      &lt;option value="JavaScript"&gt;JavaScript&lt;/option&gt;
                      &lt;option value="Lisp"&gt;Lisp&lt;/option&gt;
                      &lt;option value="Perl"&gt;Perl&lt;/option&gt;
                      &lt;option value="PHP"&gt;PHP&lt;/option&gt;
                      &lt;option value="Python"&gt;Python&lt;/option&gt;
                      &lt;option value="Ruby"&gt;Ruby&lt;/option&gt;
                      &lt;option value="Scala"&gt;Scala&lt;/option&gt;
                      &lt;option value="Scheme"&gt;Scheme&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;button id="toggle"&gt;
                  Show underlying select&lt;/button&gt;
          &lt;/div&gt;
          &lt;!-- End demo --&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>