-2

人間が必要です... CSS ドロップダウン メニューが ie8 に表示されず、点滅してから iPhone 5 ブラウザーで閉じます (レスポンシブ デザイン)..themeforest テンプレートのコードを使用します。これ以上の別れはありませんが、ここにコードがあります。

HTML

<div id="navigation">

<ul>
<li><a href="/index.htm">Home</a></li>

<li><a href="/about">About</a>
<ul>
<li><a href="/leadership">Leadership</a></li>
<li><a href="/giving">Giving</a></li>
<li><a href="/careers">Careers</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</li>

</ul>

</div>

CSS

/* Main Navigation

==========================*/

#navigation {
float: right;
}


#navigation ul, #navigation li {
list-style:none; 
padding:0; 
margin:0; 
display:inline;
}


#navigation ul li{
float:left;  
position:relative; 
}


#navigation ul li a { 
font-family: Arial, sans-serif;
display: inline-block;
color: #888;
padding: 40px 6px 10px 6px;
margin: 0 5px;
text-decoration: none;
font-size: 14px;
border-bottom: 3px solid transparent;
}


#navigation ul li a:hover{
border-bottom: 3px solid #555;
}


#navigation ul ul {
opacity: 0; 
margin: -3px 0 0 5px;
filter: alpha(opacity=0); 
position: absolute;
top:-99999px; 
left: 0;
background: #fff;
border: 1px solid #dddddd;
border-top: 3px solid #555;
z-index: 999;
}


#navigation ul ul li a:hover {
border-bottom: 1px solid #ddd;
}


#navigation ul ul li a {
padding: 8px 0;
display: block;
width: 130px;
margin: 0 16px;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-bottom: 1px solid #dddddd;
border-top: 1px solid transparent;
}



#navigation ul ul ul { 
position:absolute; 
top:-99999px; 
left:100%; 
opacity: 0;
margin: -3px 0 0 0;
z-index: 999;
}



#navigation ul ul ul li a { 
border-bottom: 1px solid #dddddd !important;
border-top: 1px solid transparent;
}



#navigation ul ul li:last-child a, #navigation ul ul li:last-child a:hover {
border-bottom: 1px solid transparent
}


#navigation ul ul ul li:last-child a {
border-bottom: 1px solid transparent !important
}


#navigation ul li:hover>ul{
opacity: 1; 
position:absolute; 
top:99%; 
left:0;
}


#navigation ul ul li:hover>ul{
position:absolute; 
top:0; left:100%; 
opacity: 1; 
z-index:497; 
background: #fff border: 0; 
}


#navigation ul li:hover > a {
color: #444;
}


#navigation ul ul li:hover > a {
border-top: 1px solid transparent; 
color: #444;
}


#current {
font-weight: bold !important; 
color: #444 !important; 
border-bottom: 3px solid #555 !important;
}
4

1 に答える 1

0

あなたの問題は次の行にあるようです：

filter: alpha(opacity=0);

これを IE8 で動作させるには、次の行を含める必要があります。

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/

または、行を完全に削除しても何も壊れないようです。さまざまなブラウザーを試して、何が起こるかを確認する必要があるかもしれません。

ここでは、IE8 の不透明度に関するより詳細な議論があります: Web ページの不透明度?

申し訳ありませんが、iPhone 側でお手伝いすることはできません。

また、コードにバグがあるようです:

#navigation ul ul li:hover>ul{
  position:absolute; 
  top:0; left:100%; 
  opacity: 1; 
  z-index:497; 
  background: #fff border: 0; 
}

#fff最後の行の後にセミコロンがありません。W3C CSS Validatorを使用すると、このようなバグをトラップできます。

于 2013-03-06T17:04:31.020 に答える