CSS Issue with JQuery Autocomplete in IE8_问答_开发者

CSS Issue with JQuery Autocomplete in IE8

开发者 https://www.devze.com 2023-01-30 20:40 出处：网络

Im getting a really weird problem which im pretty sure is due to \'positioning\'. Basically i\'ve got a master page, which contains a container div, and has its position set to absolute, and using th

Im getting a really weird problem which im pretty sure is due to 'positioning'.

Basically i've got a master page, which contains a container div, and has its position set to absolute, and using this it fills in margins along the side of the page. I'm then trying to use jQuery AutoComplete on a page, which itself has the position set to absolute, but when I select an item from the list, it reduces the margins, and its as though the absolute position on the page is removed/overriden, until typing something in the input box.

Using Firefox and Chrome there is no issue, and they work as expected.

I've managed to replicate my problem a bit simpler:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CssProblem.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
      <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.开发者_运维百科8.4/jquery-ui.js"></script>

    <script>
        $(function () {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp"
            ];
            $("#tags").autocomplete({
                source: availableTags
            });
        });
        </script>
</head>
<body>
  <div id="container-content" style="width: 98%; position: absolute; min-height: 100%; border-left: solid 1px #ccc; border-right: solid 1px #ccc;">
        <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags" />
        </div>
        <br />
        Some Text
    </div>
</body>
</html>

Any help/tips/suggestions would be greatly appreciated

Edit: Found this issue does not apply to IE8, but does apply against IE7 & IE8 Compat mode, still having no joy

For