3

我已经尝试了大约 5 个小时，我感觉非常非常愚蠢。：秒

整个代码经过 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 上，子弹更多在顶部，在所有其他子弹上，它在底部（由于添加了 padding-top）；

没有更好的 CSS 代码让项目符号与文本垂直对齐，不需要逐个像素调整？

预期结果：

预期的结果

4

1 回答 1

2

padding-top:2px可能你应该3px在#main-navigation ul li a.

它适用于我的浏览器，而不是全部检查。

在这里检查：http: //jsfiddle.net/ZnzYk/1/

嘿，我刚刚又给你一件事，我不知道它可能对你有帮助。

vertical-align: middle

在这里，您可以在 w3schools玩它。

于 2012-06-08T18:30:08.920 回答