CSS - IE7忽略第一个列表项目的边距？

如果您转到第一个博客文章（Mona）并使用'+'图标展开它。图像缩略图使用边距从左边对齐24像素。这适用于每个浏览器，但IE7会忽略第一个列表项目的边距。CSS - IE7忽略第一个列表项目的边距？

http://www.dririser.co.uk/index.php

CSS

.artistMeta li { 
float: left; 
margin: 0 0 24px 24px; 
position: relative; 
width: 160px; 
}

有一个类似的问题就在这里，但没有真正的答案，我不能用自己的解决方案。

Why is ie7 ignoring the left-margin on my first list item (only)?

任何想法？

来源

2011-05-17 Yammi

目前，我手边没有IE7，但它听起来像一个hasLayout错误。因此，我建议检查http://haslayout.net/css/，在那里你可能会找到一个解决方案，或者可能会指向一个解决方案。 – ofi 2011-05-17 10:29:36

我无法在该列表中看到它。 – Yammi 2011-05-17 10:37:12

它实际上只在第二个'li'上忽略它.. – 2011-05-17 11:21:54

只是一个快速测试..不知道是否会工作..但尝试添加您li一个display:block，并且不使用简写的裕量，转而使用margin-left和margin-bottom ... 在我看来， IE浏览器不刷新元素的风格，因为当我检查元素时，导航器添加了正确的页边距...

如果这样做不起作用..您可能想将样式放在标签内因为你使用JS来添加图像），我知道这不是优雅，但我想这可能会强制导航器设置样式上的li

如果这不起作用..那么我不知道什么可能是错的= P。我希望这可以帮助...

祝你好运！

来源

2011-05-17 10:56:39 pleasedontbelong

谢谢，虽然没有做任何事情。我从来没有遇到过浏览器不能解释CSS速记？ – Yammi 2011-05-17 11:52:46

~~问题IE7在这里不是在你的CSS文件，它在你的JavaScript在global.js。具体有以下行...~~

$(".artistMeta > li:nth-child(3n+1)").addClass("articleSlideOdd");

按在CSS惯例，JQuery的从1开始，孩子计数第n个孩子（如在第一个孩子nth-child(1)），其中作为，IE7期待它从0开始。所以用ie7 3n + 1匹配第二，第五和第八项等等。

看起来JQuery没有正确处理ie7，所以您需要两条语句来涵盖ie7等等。

来源

2011-05-17 15:01:08 musaul

你确定吗？我做了一个测试小提琴，它似乎在IE7等工作正常http://jsfiddle.net/sSwsw/ – Yammi 2011-05-23 08:55:00

看起来像我错了。我认为是这样，因为如果你将'articleSlideOdd'中的margin-left改为5px，在IE7中它是第二个移动5px（即意外行为）。但是，如果在同一个css块中添加一个边框，它是第一个获得边框*（这是预期的行为，我猜测我错了）*。 – musaul 2011-05-24 00:20:44

在IE8中，您在IE7模式下获得了相同的行为，但奇怪的是，只要单击IE8开发人员工具中的任何CSS复选框，图像位置就会自动更正。我认为你刚刚遇到了一个浏览器错误。 – musaul 2011-05-24 00:23:12

CSS - IE7忽略第一个列表项目的边距？

回答

相关问题