我已经尝试了大约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添加到3像素使它们在IE 8、IE9和良好的浏览器上看起来更或多或少相同。但感觉有点hacky,仍然不一致(在IE上,项目符号更靠上,在其他所有浏览器上,项目符号在底部(由于添加了padding-top);
难道没有更好的CSS代码可以使项目符号与文本垂直对齐,而不需要进行像素级的调整吗?
预期的结果:
![the intended result](https://istack.dev59.com/Vvvfd.webp)