1. ホーム
  2. 質問と答え
  3. IE7 div奇妙な

IE7 div奇妙な

2012-03-01 7 views
1

私はIE7を除くすべてのブラウザで完璧に動作するメニューを持っています。私はこの問題の原因を見つけることができないため、新しい目が必要です。メニューでIE7 div奇妙な

は、（クライアントの名前を削除するために編集した）ここで見る左の旗を持っている項目があります。

What the menu looks like in other browsers

は、そして、これはIE7で次のようになります。

IE7ではWhat the menu looks like in IE7

、私はのdivが戦っていると思う、これフラグdivが右へのdivの上に座って、強制的にダウン取得し、ABを作成しますメニューに入る。

良く説明するためには、ここで（スタイル順不同リスト製）メニューのコードは次のとおりです。

<li id="menu_worldwide"><a href="javascript:;">WORLDWIDE</a> 
    <ul> 
    <li><a href="/global.asp" id="launch_map">Worldwide Map</a></li> 
    <li><a href="/map.asp" id="launch_map_plantyard">Plants &amp; Yards</a></li> 
    <li> 
     <div class="menu_flag"><img src="/images/flags/Icons-flag-ca.gif" width="16" height="11" border="0"></div> 
     <div class="menu_flag_link"> <a href="http://www.xxxxx.com/" target="_blank">Canada<br /> 
     <em class="language">(English)</em></a></div> 
    </li> 
    <li> 
     <div class="menu_flag_2line"><img src="/images/flags/Icons-flag-eu.gif" width="16" height="11" border="0"></div> 
     <div class="menu_flag_link"><a href="javascript:;">Europe<br /> 
     <em class="language_nomargin">(Multi-language) </em><img src="/images/arrow.png" width="11" height="11" border="0" /></a></div> 
     <ul class="left"> 
     <li> 
      <div class="menu_flag"><img src="/images/flags/Icons-flag-gb.gif" width="16" height="11" border="0"></div> 
      <div class="menu_flag_link"><a href="http://www.xxxxx.com/international/english/home.htm" target="_blank">UK<br /> 
      <em class="language">(English)</em></a></div> 
     </li> 
     <li> 
      <div class="menu_flag"><img src="/images/flags/Icons-flag-fr.gif" width="16" height="11" border="0"></div> 
      <div class="menu_flag_link"><a href="http://www.xxxxx.com/international/francais/home.htm" target="_blank">France<br /> 
      <em class="language">(Fran&ccedil;ais)</em></a></div> 
     </li> 
     <li> 
      <div class="menu_flag"><img src="/images/flags/Icons-flag-de.gif" width="16" height="11" border="0"></div> 
      <div class="menu_flag_link"><a href="http://www.xxxxx.com/international/deutsch/home.htm" target="_blank">Deutschland<br /> 
      <em class="language">(Deutsch)</em></a></div> 
     </li> 
     <li> 
      <div class="menu_flag"><img src="/images/flags/Icons-flag-es.gif" width="16" height="11" border="0"></div> 
      <div class="menu_flag_link"><a href="http://www.xxxxx.com/international/espanol/home.htm" target="_blank">Espa&ntilde;a<br /> 
      <em class="language">(Espa&ntilde;ol)</em></a></div> 
     </li> 
     <li> 
      <div class="menu_flag"><img src="/images/flags/Icons-flag-nl.gif" width="16" height="11" border="0"></div> 
      <div class="menu_flag_link"><a href="http://www.xxxxx.com/international/nederlands/home.htm" target="_blank">Nederland<br /> 
      <em class="language">(Nederlands)</em></a></div> 
     </li> 
     </ul> 
    </li> 
    <li> 
     <div class="menu_flag"><img src="/images/flags/Icons-flag-mx.gif" width="16" height="11" border="0"></div> 
     <div class="menu_flag_link"> <a href="http://www.xxxxx.com/" target="_blank">Mexicana<br /> 
     <em class="language">(espa&ntilde;ol)</em></a></div> 
    </li>

とCSSコード：

.menu { 
    position: relative; 
    /* left: auto; 
    right: auto; 
*/ top: 143px; 
#top: 135px; /* Fix for IE 7 only */ 
    width: 100%; 
    height:28px; 
    z-index:100000; 
    font-family:Arial, Helvetica, sans-serif; 
    background-color: #669900; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-top-color: #000; 
    border-right-color: #000; 
    border-bottom-color: #000; 
    border-left-color: #000; 
} 
/* remove all the bullets, borders and padding from the default list styling */ 
.menu ul { 
    padding:0; 
    margin:0; 
    list-style-type:none; 
} 
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ 
.menu li { 
    float:left; 
    position:relative; 
    left: 0px; 
    top: 0px; 
    #padding: 0px; 
    #margin: 0px; 
} 
/* style the links for the top level */ 
.menu a, .menu a:visited { 
    display:block; 
    font-size:14px; 
    text-decoration:none; 
    color:#ffffff; 
    height:28px; 
    padding-left:10px; 
    padding-right:10px; 
    font-weight:bold; 
    background-color: #669900; 
    font-family: Arial, Helvetica, sans-serif; 
    line-height: 26px; 
    border-top-width: 0px; 
    border-right-width: 0; 
    border-bottom-width: 0px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-top-color: #333333; 
    border-right-color: #333333; 
    border-bottom-color: #333333; 
    border-left-color: #333333; 
    text-shadow: 0px 1px 1px #000; 
} 
/* style the top level hover */ 
.menu a:hover, .menu ul ul a:hover { 
    color:#FFFFFF; 
    background-color: #000000; 
} 
.menu :hover > a, .menu ul ul :hover > a { 
    color:#FFFFFF; 
    background-color: #000000; 
} 
.menu_flag_link { 
    font-size: 11px; 
    position: relative; 
    margin: 0px; 
    padding: 0px; 
    #margin-left: 20px;/* Fix for IE 7 only */ 
    #left: -20px;/* Fix for IE 7 only */ 
    #top: 0px;/* Fix for IE 7 only */ 
} 
.language { 
    font-size: 10px; 
    line-height: 10px; 
    margin-left: 20px; 
    #margin-left: 0px;/* Fix for IE 7 only */ 
} 
.language_nomargin { 
    font-size: 10px; 
    line-height: 10px; 
} 
.menu_flag_holder { 
    margin: 0px; 
    padding: 0px; 
    width: 180px; 
    position: relative; 
} 
.menu_flag { 
    position: relative; 
    padding: 0px; 
    left: 10px; 
    top: 5px; 
    margin-top: 0px; 
    margin-right: 15px; 
    #margin-right: 35px;/* Fix for IE 7 only */ 
    margin-bottom: 0px; 
    margin-left: 0px; 
    float: left; 
    #width: 16px;/* Fix for IE 7 only */ 
    z-index: 100; 
    #clear: both; 
} 
.menu_flag_2line { 
    position: relative; 
    padding: 0px; 
    left: 10px; 
    top: 5px; 
    margin-top: 0px; 
    margin-right: 15px; 
    #margin-right: 7px; 
    margin-bottom: 10px; 
    #margin-bottom: 0px; 
    margin-left: 0px; 
    float: left; 
    #width: 16px;/* Fix for IE 7 only */ 
    z-index: 100; 
} 
/* ---------------------------------------2-------------------------------------------------*/ 
/* style the second level background */ 
.menu ul ul a.drop, .menu ul ul a.drop:visited { 
    background-color: #669900; 
    background-image: url(../images/arrow.png); 
    background-repeat: no-repeat; 
    background-position: 130px center; 
} 
/* style the second level hover */ 
.menu ul ul a.drop:hover { 
    background-color: #000000; 
    background-image: url(../images/arrow.png); 
    background-repeat: no-repeat; 
    background-position: 130px center; 
} 
.menu ul ul :hover > a.drop { 
    background-color: #000000; 
    background-image: url(../images/arrow.png); 
    background-repeat: no-repeat; 
    background-position: 130px center; 
} 
/* style the second level links */ 
.menu ul ul a, .menu ul ul a:visited { 
    color:#FFFFFF; 
    height:auto; 
    line-height:normal; 
    padding:5px 10px; 
    width:160px; 
    border-width:0 1px 1px 1px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: normal; 
} 
/* yet another hack for IE5.5 */ 
* html .menu ul ul a, * html .menu ul ul a:visited { 
    width:161px; 
    w\idth:160px; 
} 
/* hide the sub levels and give them a positon absolute so that they take up no room */ 
.menu ul ul { 
    visibility:hidden; 
    position:absolute; 
    height:0; 
    top:28px; 
    left:0; 
    width:182px; 
    border-top:1px solid #000000; 
} 
/* another hack for IE5.5 */ 
* html .menu ul ul { 
    top:30px; 
    t\op:31px; 
} 
/* make the second level visible when hover on first level list OR link */ 
.menu ul li:hover ul, .menu ul a:hover ul { 
    visibility:visible; 
} 
/* ---------------------------------------3-------------------------------------------------*/ 
/* style the third level background */ 
.menu ul ul ul a, .menu ul ul ul a:visited { 
    background-color: #669900; 
} 
/* style the third level hover */ 
.menu ul ul ul a:hover { 
    background:#000000; 
} 
/* position the third level flyout menu */ 
.menu ul ul ul { 
    left:181px; 
    top:-1px; 
    width:182px; 
} 
/* position the third level flyout menu for a left flyout */ 
.menu ul ul ul.left { 
    left:-181px; 
} 
/* style the table so that it takes no ppart in the layout - required for IE to work */ 
.menu table { 
    position:absolute; 
    top:0; 
    left:0; 
    border-collapse:collapse; 
} 
/* keep the third level hidden when you hover on first level list OR link */ 
.menu ul :hover ul ul { 
    visibility:hidden; 
} 
/* make the third level visible when you hover over second level list OR link */ 
.menu ul :hover ul :hover ul { 
    visibility:visible; 
} 
/* ---------------------------------------4-------------------------------------------------*/ 


/* position the fourth level flyout menu */ 
.menu ul ul ul ul { 
    left:181px; 
    top:-1px; 
    width:182px; 
} 
/* position the fourth level flyout menu for a left flyout */ 
.menu ul ul ul ul.left { 
    left:-181px; 
} 
/* keep the fourth level hidden when you hover on second level list OR link */ 
.menu ul :hover ul :hover ul ul { 
    visibility:hidden; 
} 
/* make the fourth level visible when you hover over third level list OR link */ 
.menu ul :hover ul :hover ul :hover ul { 
    visibility:visible; 
} 

    <li> 
     <div class="menu_flag_2line"><img src="/images/flags/Icons-flag-cl.gif" width="16" height="11" border="0"></div> 
     <div class="menu_flag_link"><a href="http://www.xxxxx.com/" target="_blank">Tuberias<br /> 
     <em class="language">(espa&ntilde;ol/portugu&ecirc;s)</em></a></div> 
    </li> 
    </ul> 
</li>

問題がとのようですクラス ".menu_flag_2line"、 ".menu_flag"、 ".menu_flag_link"

私は完全に困惑しています。

出典

2012-03-01 stephmoreland

+0

あなたは、私がいることを試してみました、そして、それは動作しませんでしたmenu_flag_link –

+0

フローティング試してみました。 – stephmoreland

+1

IEの条件付きコメント（http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx）を使用してIE固有のコードを割り当てようとしましたか？ – dangerChihuahua007

答えて

0

は、IE7は素晴らしいプレーするための位置要素で2つのdivをラップする必要があります。

ul.left li {position:relative; float:left; width:100%;}

出典

2012-03-01 20:46:05 pyroglass

関連する問題

 関連する問題