Элементы внутри ul не работают в IE

У меня есть UL, который не работает в IE, но работает нормально в хромированном, сафари и firefox.Элементы внутри ul не работают в IE

<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');

Это будет золь на данный момент.

источник

2014-01-02 Phu Minh Pham

Поделиться в CSS и какая версия IE вы используете? – Priyank

http://jsfiddle.net лучше –

Вам просто нужно добавить 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>

источник

2014-01-02 09:34:36

Я думаю, что я должен пойти на решение изменения высоты элемента заголовка div и изменить его размер снова, показывая и скрывая страницу. Thx за помощь :) –

Элементы внутри ul не работают в IE

ответ

Смежные вопросы