1

内部でレンダリングされる名前のリストがあります<ul>。いくつかの CSS コードを適用しましたが、ブラウザー固有の問題に直面しています。

  • Chrome : リスト要素が 1 行ずれています。

  • Firefox : すべてのリスト項目が 1 つの項目に折りたたまれます。

コード スニペット ( JS ビン エディター)

HTML

<div id='container'>
<ul class='list'>
  <li> <div class='rel'> 
          <div class='abs'> item 1 </div>
  </div> </li>

  ... More items similar to above one

CSS

#container {
  height: 100px;
  overflow-y:scroll;
  width: 200px
}

.list {
  background-color: skyblue;
}

.rel {
  position: relative;
}

div.abs {
  position: absolute;
  left: 20px;
}

両方のブラウザでこの誤動作の理由を知りたいです。間違った CSS を書きましたか?

更新:<div class='abs'>ここには追加していないコードがたくさんありますが、これは必要ではなく、abs div のコンテンツはその親に対して配置されているためです。<div class='rel'>

4

3 に答える 3

-1

あなたが実際に望む結果は何ですか。div.abs が含まれている div.rel 内で 20px だけインデントされるように修正しています。

あなたが達成しようとしていることのアイデアを教えてください。

羽

于 2013-05-21T09:55:15.977 に答える