0

このページの右上隅にある絶対位置のナビゲーションボタンがie7で表示されないのに、他のすべてのブラウザー（ie8および9を含む）では正常に機能している理由を誰かに教えてもらえますか？

ありがとう！

4

2 に答える 2

1

display:inline-blockIE7以下で適切にサポートされていないものを使用している場合（機能する場合と機能しない場合があります-要素と状況によって異なります）。

代わりdisplay:blockにfloat:left、これがよりサポートされているので、を使用してください（ただし、私の最初のリンクが表示されている場合は、使用することもできdisplay:inlineます）。

周囲のUL要素にも含めることを忘れないでくださいoverflow:hidden。そうしないと、フロートが原因で奇妙な結果が得られます。

css：

#navlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
}

#navlist li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  float: left;
  /* your styles from before */
  background-color: #F2F2F2;
  border-radius: 5px 5px 5px 5px;
  color: black;
  height: 20px;
  padding-top: 2px;
  text-align: center;
  width: 20px;
}

マークアップ：

<ul id="navlist">
  <li id="li1">
    <a id="link1" href="#">1</a>
  </li>
  <li id="li2">
    <a id="link2" href="#">2</a>
  </li>
  <li id="li3">
    <a id="link3" href="#">3</a>
  </li>
  <li id="li4">
    <a id="link4" href="#">4</a>
  </li>
 </ul>

便利なリンク：

  1. http://aaronrussell.co.uk/legacy/cross-browser-support-for-inline-block/
  2. http://www.quirksmode.org/css/display.html#t03

アップデート：

（上記で問題が解決しない場合）もう1つ試すことができるのは、IE7の条件付きコメント付きコードを一時的に削除することです。問題の原因となるものがそこにないことを確認するためです。

<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href="css/ie7.css" />
  <script type="text/javascript" src="Scripts/ie7.js"></script> 
<![endif]-->

アップデート：

IE7で実際にテストできるようになったので、境界線を有効にすると問題が発生します-css境界線を使用してデバッグすることは常に良い考えです:)上記の問題は、子要素が親の幅を押し出すことによって引き起こされています要素innerWrap。これは最近のブラウザには影響しませんが、IE7以前では、配置場所やサイズに関係なく、常に子をラップしようとします（この動作をオーバーライドしない限り）。子要素のslideWrap幅は3000ピクセルであるため、右側に配置された要素が画面の端から消えてしまいます。

次のcssで修正する必要があります。

#innerWrap { width: 100%; }
于 2012-10-23T16:30:45.793 に答える
0

左または右のプロパティを使用して、それらを表示します。

于 2012-10-23T16:30:28.247 に答える