IE8中的JQuery自动完成的CSS问题

时间:2010-12-13 12:08:00

标签: css internet-explorer-8 autocomplete css-position

我得到一个非常奇怪的问题,我非常肯定是由于'定位'。

基本上我有一个包含容器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&amp; IE8 Compat模式,仍然没有乐趣

1 个答案:

答案 0 :(得分:0)

对于

position:absolute

可能你可以把它改成

position:absolute !important

这将不允许任何外部CSS覆盖位置属性尝试这可能会帮助你