[英]Safari vs Firefox: Strange UL “padding”
I have this HTML: 我有这个HTML:
<article class="images">
<ul class="cf">
<li>
<a href="#">
<img src="http://www.placehold.it/800x600" alt="" />
</a>
</li>
</ul>
</article>
And this CSS: 而这个CSS:
* {
margin: 0;
padding: 0;
}
.images ul {
margin-left: -3%;
width: 100%;
background: red;
}
.images li {
list-style-type: none;
}
.images li img {
width: 17%;
margin-left: 3%;
margin-bottom: 3%;
float: left;
}
Still, in Safari the ul
seems to have some kind of padding on the right. 不过,在Safari中,
ul
似乎在右侧有一些填充。
In Firefox the ul
is displayed correctly. 在Firefox中,
ul
可以正确显示。
See it for yourself: http://jsfiddle.net/EdCXx/ 亲自查看: http : //jsfiddle.net/EdCXx/
Is there any way to fix that? 有什么办法可以解决这个问题?
Edit: With Safari 6.0.2 on OS X 10.8.2 it looks like this: 编辑:在OS X 10.8.2上使用Safari 6.0.2,它看起来像这样:
I'm assuming the issue is that you're using negative margin
and this is causing a problem (I don't have access to a Mac at the moment, so I can't verify). 我假设问题是您使用的是负
margin
,这会引起问题(我目前无法使用Mac,因此无法验证)。
Try changing your CSS to what's below. 尝试将CSS更改为以下内容。 I also changed your
clearfix
to one I picked up a while ago that has had excellent cross-browser results. 我还将您的
clearfix
更改为我前一段时间获得的,该浏览器具有出色的跨浏览器结果。
http://jsfiddle.net/EdCXx/4/ http://jsfiddle.net/EdCXx/4/
CSS: CSS:
/* Reset */
* {
margin: 0;
padding: 0;
}
/* Clearfix */
.clear:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
/* Images */
.images ul {
width: 100%;
background: red;
}
.images li {
list-style: none;
overflow: hidden;
margin-right: 3%;
margin-bottom: 3%;
float: left;
width: 17%;
height: 17%;
}
.images li img {
float: left;
max-width: 100%;
max-height: 100%;
}
And tighten up your HTML (not necessary, but it's prettier): 并加强您的HTML(没有必要,但是更漂亮):
<article class="images">
<ul class="clear">
<li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li>
<li><a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li>
<li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li>
<li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li>
<li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li>
<li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li>
<li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li>
<li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li>
</ul>
</article>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.