3

私はこれをすでに約5時間試していますが、本当に、本当にダミーだと感じています. :s

全体のコードは w3c 検証済みです。

問題のある抜粋: http://jsfiddle.net/ZnzYk/

  • ボーダー半径を使用してcssで円の箇条書きを作成しようとしました。
  • 疑似要素を使ってみました。
  • スプライトを使ってみました。

箇条書きは、(多かれ少なかれ) IE8 以降のクロス ブラウザーのテキストの垂直方向の中央に配置する必要があります。

だから私はすべての方法をあきらめて、背景画像を試しています。

CSS:

#main-navigation ul li {     
   display:inline; 
}

#main-navigation ul li a {     
   font-family: 'Miso', 'Helvetica Neue',Helvetica,Arial,sans-serif;  
   display: inline-block;        /*seems to help on IE*/
   font-size: 1.25em;     
   margin-right: 6%;     
   text-align: right;     
   text-transform: uppercase;     
   background: url('http://s7.postimage.org/fvy10uk1j/bullet.png') no-repeat 100% 50%;  
   padding-right: 4%;     
   text-decoration: none; 
}   
#main-navigation ul li a:hover {     
   color: #ED1E79;     
   text-decoration: none;     
   background: url('http://s7.postimage.org/puiznbth3/bullet_Selected.png') no-repeat 100% 50%; 
}

HTML

<div id="main-navigation"> 
   <ul>         
       <li><a href="">item 1</a></li>         
       <li><a href="">and this is item 2</a></li>         
       <li><a href="">item 3</a></li>     
   </ul> 
</div>

一貫性以外はすべて取得します。:(実際に多かれ少なかれ残っているかどうかは気にしませんが、少なくとも、現在とそれほど変わらない.

アップデート：

Asif の提案の後: padding-top を 3px に追加すると、IE 8、IE9、および優れたブラウザーでほぼ同じように見えます。しかし、それは少しハックのように感じ、まだ一貫性がありません (IE では弾丸が一番上にあり、他のすべての弾丸では一番下にあります (パディングトップが追加されているため);

ピクセルごとの調整を必要としない、箇条書きをテキストと垂直方向に揃えるためのより良い CSS コードはありませんか?

意図した結果:

意図した結果

4

1 に答える 1

2

padding-top:2pxにいくつか（または3pxあまりにも）追加する必要があるかもしれません#main-navigation ul li a。

私のブラウザでは問題なく動作しますが、すべてをチェックしませんでした。

ここをチェックしてください：http://jsfiddle.net/ZnzYk/1/

ねえ、もう 1 つだけあなたに言いたいことがあります。

vertical-align: middle

ここでは、w3schools で遊ぶことができます。

于 2012-06-08T18:30:08.920 に答える