インターネットエクスプローラーの間違い、その他good

私はちょっとした問題があります。私は初めてJSを使わずに右に矢印をつけたULメニューをやっています。インターネットエクスプローラーの間違い、その他good

小さな問題が発生しました。 Internet Explorerで... IEは、arround 2pxの#subMenu ul liにマージンを表示します（ページの背景を参照）。他のbroswerでは、すべてが問題ありません。

また、私はULの右側にあるPNGを参照してください。 ULが0px-100pxのままになっていると、写真は100px-122pxのままで表示されます。 IEは写真を表示しません、他はありません。

グッド：FF 9.0.1、Safariの5.1.2、オペラ11.60、クロム16.0.912.75 間違っ：IE私はこれを試してみたけど...ボーダーはこれでうまくいかない9.0.4

：

#subMenu ul li{ 
    list-style-type: none; 
    margin: -2px; 
}

は、ここで私が言いたいの絵です：http://i44.tinypic.com/6poy8i.jpg ここではテストページです：

<html> 
    <head> 

     <style> 
     html, body{ 
      margin: 0px; 
      padding: 0px; 
      font-family: Arial; 
      font-size: 12px; 
     } 

     #wrapper{ 
     } 

     #subMenu{ 
      padding: 5px; 
     } 

     #subMenu .wrapMenu{ 
      width: 180px; 
     } 

     #subMenu ul{ 
      list-style-type: none; 
      width: 100%; 
      padding: 0px; 
      margin: 0px; 
      height: auto; 
     } 

     #subMenu ul li{ 
      list-style-type: none; 
      margin: 0px; 
     } 

     #subMenu ul li:hover{ 
      width: 100%; 
     } 

     #subMenu ul li a, 
     #subMenu ul li a:link, 
     #subMenu ul li a:visited{ 
      text-decoration: none; 
      color: #b9b9b9; 
      display: block; 
      background-color: #f5f5f5; 
      border-left: 1px solid #c3c3c3; 
      border-bottom: 1px solid #c3c3c3; 
      border-right: 1px solid #c3c3c3; 
      width: 100%; 
      height: 48px; /* padding-top + padding-bot + height de ul li span*/ 
     } 

     /*f9f9f9*/ 
     #subMenu ul li a:hover{ 
      color: #7a7a7a; 
      border-right: 0px; 
      background-color: #f9f9f9; 
     } 

     #subMenu ul li span{ 
      width: 100%; 
      float: left; 
      height: 20px; 
      display: block; 
      padding: 14px 6px 14px 20px; 
     } 

     #subMenu ul li span:hover{ 
      background: transparent url('subMenu_Arrow.png') no-repeat 180px 0px; 
     } 

     #subMenu ul li a.first{ 
      border-top-left-radius: 3px; 
      border-top: 1px solid #c3c3c3; 
     } 

     #subMenu ul li a.last{ 
      border-bottom-left-radius: 3px; 
     } 

     </style> 
    </head> 

    <body> 
     <div id="subMenu"> 
      <div class="wrapMenu"> 
       <ul> 
        <li><a class="first" href="#"><span>Arrêts</span></a></li> 
        <li><a href="#"><span>Avis</span></a></li> 
        <li><a href="#"><span>Planibus</span></a></li> 
        <li><a class="last" href="#"><span>Trajets</span></a></li> 
       </ul> 
      </div> 
     </div> 

    </body> 
</html>

あなたのためのおかげで役立ちます。

出典

2012-01-11 David Bélanger

マークアップの最初の行にdoctypeを指定する必要があります。 doctypeがなければ、IEは本質的にIE 5.5レンダリングエンジンであるquirks modeでレンダリングします。 Quirksモードは、とりわけボックスモデルに大きな影響を与えます。

例：doctypeを指定

<!doctype html>

はあなたのスクリーンショットで正しい結果が得られます。

出典

2012-01-11 15:22:50 wsanville

ハハ、あなたは今日何かを教えてくれました！それはとてもばかげている...私はそれのためにIEはそれのように動作するとは思わなかった。テストページではなく、実際のページで作業を開始する必要がありました。注目される。ありがとう！私は5年後に受け入れます。6年のウェブ開発の後でさえ、私たちはいつもそんなに愚かですが重要なことを学びます！ –

喜んで助けてください！それが判明したので、ここでの "WTF IE"の多くの質問は、 'doctype'を指定することで答えられます:) – wsanville

インターネットエクスプローラーの間違い、その他good

答えて

関連する問題