IE8 中 JQuery 自动完成的 CSS 问题

发布于 2024-10-07 19:32:38 字数 1784 浏览 0 评论 0原文

我遇到了一个非常奇怪的问题，我很确定这是由于“定位”造成的。

基本上我有一个母版页，其中包含一个容器 div，并将其位置设置为绝对位置，并使用它填充页面一侧的边距。然后我尝试在页面上使用 jQuery AutoComplete，该页面本身的位置设置为绝对，但是当我从列表中选择一个项目时，它会减少边距，就好像页面上的绝对位置被删除/覆盖，直到在输入框中输入内容。

使用 Firefox 和 Chrome 没有问题，并且它们按预期工作。

我已经设法更简单地复制我的问题：

    <%@ 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>

任何帮助/提示/建议将不胜感激

编辑：发现此问题不适用于 IE8，但适用于 IE7 和 IE8。 IE8兼容模式，依然不爽

原文

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

分享到QQ

分享到微博