关于IE6下Li标签左边多出宽16pxBUG的问题
2013-04-09 11:24
232 查看
偶然发现,IE6的Li标签左边会多出16px的宽度,即使把list-style-type设置成none。而在Firefox中却是正常的(IE其它版本没测试,不过应该是和Firefox一样的)。
经验证,其实是IE6的list-style-position属性造成的,默认情况下,Firefox中list-style-position值为 outside,即列表项符号会在LI标签的外面显示。而IE6的默认值则相反(inside)。不过这还不是问题关键,IE6完全是属于占着茅坑不拉屎 的那种,即使你不显示列表项符号,即把list-style-type设置成none,它依然会保留列表项符号占用的空间。所以无论你给LI的设置 margin:0或者padding:0,你都会发现Li左边会多出16PX的空间。
既然知道问题的关键,解决起来就不难了,直接设置 ul 的样式为
list-style-position:outside;
OK,把项目符号赶到LI的外面去,让IE6去哭吧。。。
经验证,其实是IE6的list-style-position属性造成的,默认情况下,Firefox中list-style-position值为 outside,即列表项符号会在LI标签的外面显示。而IE6的默认值则相反(inside)。不过这还不是问题关键,IE6完全是属于占着茅坑不拉屎 的那种,即使你不显示列表项符号,即把list-style-type设置成none,它依然会保留列表项符号占用的空间。所以无论你给LI的设置 margin:0或者padding:0,你都会发现Li左边会多出16PX的空间。
既然知道问题的关键,解决起来就不难了,直接设置 ul 的样式为
list-style-position:outside;
OK,把项目符号赶到LI的外面去,让IE6去哭吧。。。
相关文章推荐
- 关于动态页面在调用外部页面CSS样式IE6bug问题解决
- css中的hover ,关于li与a标签的问题
- 关于相对定位、绝对定位在ie6下bug的三个问题
- 关于IE6下a标签的a:hover伪类失效的问题
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
- 关于IE标签LI文字换行问题
- CSS IE6、7下关于Position的一个bug问题分享
- 关于li标签浮动后文字和图片的对齐问题
- li标签的display的inline-block在IE6中的显示问题
- 关于ie6、ie7折行问题(li用了float)
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
- ie6中关于div 高度的bug-----空div标签默认高度
- 关于ul下<li></li>内插入<span>内容</span>标签自动换行不在同一行问题
- 关于ie6、ie7折行问题(li用了float)
- 曾经遇到的一些 关于 html 中 li 标签的问题
- IE6下浮动li下的a标签设置display:block后的BUG
- (转的)关于IE标签LI文字换行问题
- 关于struts2 sort标签的使用问题
- 关于IE和火狐,谷歌,Safari对Html标签Object和Embed的支持问题
- 关于SSH项目中a标签提交action后执行两次的问题