更新:
如果我将 ul
替换为 div
,这似乎只是 ul
/li
的问题并删除 li
并将相关样式应用于 a
而不是很好。 ID' 仍然不知道为什么 ul
/li
结构会出现问题,因为 margin/padding 已被显式重置。
我在 IE7 中遇到固定位置元素的子元素的问题。他们似乎从某个地方获得了宽度/边距/填充,但我无法辨别在哪里或如何修复它。
你可以在jsFiddle here中看一看.我添加了 bg 颜色只是为了调试。 image/li 标签应该与黄色齐平,并且在 IE8 以及 mozilla 和 webkit 中。但是在 IE7 中,左边有一个额外的 ~20px 的空间将它们推到一边,就好像 li
、a
或 img
标签有 margin 。但是,如果我查看 IEDevToolbar 中的属性,则不会应用边距或填充。此外,即使我为所有内容分配宽度并使用 IEDevToolbar 直接在每个元素上将边距/填充归零,也会发生这种情况。
我完全迷失了这一点。
下面是相关代码...有问题的布局上有一个 XHTML 1.0 Transitional 文档类型:
<style type="text/css">
.social-widgets {
position: fixed;
top: 125px;
left: 0px;
background: #f00;
width: 34px;
}
.social-widgets-content {
list-style: none inside none;
margin: 0;
padding: 0;
text-align: left;
background: #ff0;
}
.social-widgets-content li {
margin: 10px 0 !important;
padding:0;
width: 34px;
background: #0f0;
}
.social-widgets-content img {
display:block;
border-top: 2px solid #e9e8e8;
border-bottom: 2px solid #e9e8e8;
border-right: 2px solid #e9e8e8;
padding: 0px; margin:0px;
background: #00f;
}
</style>
<div class="social-widgets">
<ul class="social-widgets-content">
<li><a href="#"><img src="/images/button/button.facebook.png"></a></li>
<li><a href="#"><img src="/images/button/button.twitter.png"></a></li>
<li><a href="#"><img src="/images/button/button.feedback.png"></a></li>
</ul>
</div> <!-- /.social-widgets -->
最佳答案
这与position:fixed;
无关。这是列表样式的问题。当使用 list-style: none inside none;
时,IE7 仍然为列表标记添加间距,尽管标记被设置为 none
。解决方案是设置 list-style-type: none;
而不是使用速记。
关于css - 为什么固定位置元素的静态定位子元素会变宽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4010087/