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 回答