0

Web ページの上部にある div で動的に作成されたドロップダウン メニューがあります。ドロップダウンの 1 つがブラウザ ウィンドウを拡張する必要があるほど大きくなると、Safari ウィンドウは拡張されません。これは、Internet Explorer と Firefox の両方で正常に機能します。CSS の設定をいくつか試しましたが、解決策が思い浮かびません。どんな提案でも大歓迎です。

したがって、サブメニューがページに配置されたときの元の css は次のとおりです。

.sub_menu {
display:none;
z-index: 2;
margin-left:5px;
padding:10px;
width: 140px;
position: absolute;
top: 0px;
left: 120px;
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}

display:none は、サブメニューが表示されないようにします

次に、ホバー時に起動するJavaScriptがあります：

#menu li:hover > ul, #menu li.hover > ul {
display: block;
}

これにより、サブメニューが表示されますが、このメニューが画面に対して縦方向に大きくなりすぎた場合に、Safari ブラウザー ウィンドウは拡大されません。

4

1 に答える 1

0

そのため、これを機能させるために多少の回避策を講じることになりました。CSS に display:block; を設定しました。しかし、可視性：非表示。ページをロードするとき。次にホバーすると、CSS の可視性が可視に変わります。これは、テスト済みのすべてのブラウザー (IE、Firefox、Chrome、および Safari) で機能しました。残念ながら、この回避策では、DIV の可視性が変化したときにブラウザー ウィンドウのサイズを動的に変更することはできません。

于 2013-06-24T18:28:47.997 に答える