IE 6/7 CSS Issue: Extra padding/margin on list item in unordered list
我正在构建的站点上出现IE 6和7的问题,您可以在此处查看。侧边栏和菜单的无序列表之间突然出现一些额外的空间。
此处是IE6
这是IE7
这是IE8
IE9也可以
如您所见,IE8和IE9可以正常工作。菜单紧靠侧边栏。我已经在愚弄了一段时间,但还无法修复它。
HTML结构只是div> ul> li a
在编写任何代码之前,我还通过CSS重置将所有内容清零。有谁知道是什么原因造成的?
非常感谢您的帮助
尝试将
演示
在Browserling中测试。
在没有CSS的情况下很难说。
但是我想说几件事:
对于IE6 / 7人群是否需要像素完美?即使缩进,该站点看起来也不错,因此可能无需修复。
如果确实需要修复它,为什么不使用一些针对IE6 / 7的条件注释,然后设置负的空白。
您需要规范化样式以提高可移植性,浏览器之间的默认设置略有不同。
http://necolas.github.com/normalize.css/
您可以通过输入
进行检查
1 2 3 | ul, li { list-style-position: inside; } |
如果您已将每个填充边距清零。
1)您必须在html页面的head标签之前添加这些行。
1 2 3 4 5 6 | <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html class="no-js ie6 ieb" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7 ieb" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]--> <!--[if gte IE 9 ]> <html class="no-js ie9" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]--> <!--[if !IE]><!--> <html class="no-js" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <!--<![endif]--> |
2)根据IE浏览器版本,这些行将特定类添加到html容器中。
3)然后,您可以为CSS问题添加特定的CSS文件。
4)在该文件中,您必须根据该浏览器提及属性。
在您的情况下,您可以这样做:
向该ul添加了类:bd_links
1 2 3 4 | ie6 ul.bd_links,ie7 ul.bd_links, { margin-left:-20px; } |