Question

我有一个在IE中不起作用的UL，但在chrome，safari和firefox中运行良好。

<div id="header">
    <div id="default_header">
        WebAppName
        <asp:Label ID="LabelUserId" runat="server" Text=""></asp:Label>
    </div>
    <div id="lookup_header" style="display:none" class="buttonHeader">
        <a id="lookup_cancel" class="cancelButton button blue" href="javascript:PrismeLookup.cancelLookup();">Cancel</a>
        <asp:Label ID="lookup_selected_value" runat="server" Text=""></asp:Label>
        <a id="lookup_set" class="setButton button blue" href="javascript:PrismeLookup.setLookup();">Ok</a>

        <ul class='lookup' id='lookup_search'>
            <li>
                <button tabindex='2' onclick='PrismeLookup.search(); return false;'>Search</button>
                <span>
                    <input id='lookup_searchField' tabindex='1' type='text' value='' />
                </span>
            </li>
        </ul>
    </div>
</div>

如果我有标签，我可以看到按钮和输入元素，但我无法用鼠标点击这些元素。

似乎按钮和输入元素位于其他元素的后面，使得它们无法被点击。

标题的CSS：

#header
{
    text-align: center;
    color:#FFF;

    height: 45px;               
    position:fixed;
    z-index:5;
    top:0px;
    width:100%;

    top:0; left:0;
    padding:0;

    background-color:#2785c7; /* Old browsers */    
    background:    -moz-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* FF3.6+ */    
    background: -webkit-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Chrome10+,Safari5.1+ */
    background:      -o-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Opera 11.10+ */
    background:     -ms-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* IE10+ */
    background:         linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* W3C */
    background: -webkit-gradient(linear, left top, left bottom, from(#206493), to(#2375ae), color-stop(85%, #2785c7)); /* Chrome,Safari4+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#206493', endColorstr='#2785c7',GradientType=0 ); /* IE6-9 */
}

以下是该网站的图片： enter image description here

似乎IE对标题做了一些事情。当我将高度从45px更改为90px时，它可以工作，但这会搞砸其他页面。

这是头元素：

<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=0"/>-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
    <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height, target-densityDpi=device-dpi, maximum-scale=1.0"/>-->
    <!--<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/>-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>    
    <link rel="apple-touch-icon" href="images/logo.png"/>
    <link rel="apple-touch-startup-image" href="images/startup.png"/>
    <link rel="shortcut icon" href="/images/favicon.ico" />

    <title>WebAppName</title>

    <link href="css/style.css?prisme=#VERSION" rel="stylesheet" type="text/css"/>
    <link href="css/divScroll.css?prisme=#VERSION" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.6.4.min.js?prisme=#VERSION" type="text/javascript"></script>
    <script src="js/divScroll.js?prisme=#VERSION" type="text/javascript"></script>
    <script src="js/javascript.js?prisme=#VERSION" type="text/javascript"></script>
</head>

解决方案 在显示页面时在JavaScript文件中添加了这个：

$('#header').height('90px');

这时隐藏页面：

$('#header').height('45px');

这将是现在的解决方案。

Answer 1

您只需添加overflow:auto或将当前div高度45px以上的特定高度设置为更多数字。

您当前的div高度会阻止您的ul部分（文本框和按钮）显示在IE中的页面上。

或
您可以从ul中移除<div id="header">元素，也可以将其添加到主标题div之外的其他div中例如：

<div style="width: 100%;position: relative;top: 45px;text-align: center;"> <ul class='lookup' id='lookup_search' style="list-style: none;"> <li> <button tabindex='2' onclick='PrismeLookup.search(); return false;'>Search</button> <span> <input id='lookup_searchField' tabindex='1' type='text' value='' /> </span> </li> </ul> </div>

ul里面的元素在IE中不起作用

1 个答案: