IE7保证金问题
并感谢您的帮助。
使用边距时，IE7有一个令人困惑的问题。
我有一个容器，在那个容器内我有一些漂浮的盒子。
这些方框应用了上边距，右边，左边，下边距，除了左边没有边距的第一个框，以及右边没有边距的最后一个框。
在除IE7之外的所有浏览器中看起来都很好，其中边距不适用于每行中的第一个元素（至少这是我认为正在发生的事情。
如果我使用开发工具在ie7中删除了右边距，然后再检查它，它就会正确显示。
以前有人见过这样的事吗？
我很难过。
修改 它似乎是由位置：容器div上的相对引起的。将此更改回静态可修复保证金问题，但现在意味着我的div在ie7中未对齐。有谁知道为什么位置相对会搞砸利润？
新编辑 示例下载可以在这里找到： www.jimplode.co.uk/content/stackoverflow.zip
视图不正确
在取消选中并重新检查其中一种边距样式后，修正边距。
HTML：
<div class="lowerContent">
<div class="mediumContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginBottom">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" />
<div class="textContainer">
<h1>Car Insurance</h1>
<ul>
<li>Protected NCD for life</li>
<li>NCD Accelerator</li>
<li>European Cover Included</li>
<li>Multiple Drivers and Vehicles</li>
<li>Breakdown Cover Included</li>
<li>Legal Cover Included</li>
</ul>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
</div>
<div class="imageContainer">
<img src="/images/misc/boxphoto_1.jpg" alt="box image 0" />
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft contentBoxMarginRight contentBoxMarginBottom">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" />
<div class="textContainer">
<h2>Home Insurance</h2>
<div class="imageContainer">
<img src="/images/misc/boxphoto_2.jpg" alt="box image 2" />
</div>
<ul>
<li>Working at home Equipment</li>
<li>Helmet and Leathers</li>
<li>Legal Cover</li>
<li>Caravan Cover</li>
<li>Personal Accident Cover</li>
</ul>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft contentBoxMarginBottom">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" />
<div class="textContainer">
<h2>Life Insurance</h2>
<div class="imageContainer">
<img src="/images/misc/boxphoto_3.jpg" alt="box image 3" />
</div>
<ul>
<li>Cover From £5 a month</li>
<li>Your loved ones protected</li>
<li>Immediate cover available</li>
<li>We search, you save</li>
</ul>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="emptyClear"></div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginRight">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_4.jpg" alt="box image 4" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginLeft">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_5.jpg" alt="box image 5" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginLeft">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_6.jpg" alt="box image 6" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_7.jpg" alt="box image 7" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="emptyClear"></div>
</div>
CSS：
.lowerContent
{
position:relative;
margin:0px 0px 0px 0px;
}
.expandableBox
{
display:block;
width:100%;
}
.expandableBox .top
{
background-image:url("/images/backgrounds/bkg_whitebox_t.png");
background-repeat: repeat-x;
height:10px;
}
.expandableBox .topLeft
{
height:10px;
padding:0px 0px 0px 10px;
background-image:url("/images/backgrounds/bkg_whitebox_tl.png");
background-repeat: no-repeat;
background-position:left top;
}
.expandableBox .topRight
{
height:10px;
padding:0px 10px 0px 0px;
background-image:url("/images/backgrounds/bkg_whitebox_tr.png");
background-repeat: no-repeat;
background-position:right top;
}
.expandableBox .middleLeft
{
padding:0px 0px 0px 10px;
background-image:url("/images/backgrounds/bkg_whitebox_l.png");
background-repeat: repeat-y;
background-position:left top;
}
.expandableBox .middle
{
background-color:#FFFFFF;
}
.expandableBox .middleRight
{
padding:0px 10px 0px 0px;
background-image:url("/images/backgrounds/bkg_whitebox_r.png");
background-repeat: repeat-y;
background-position:right top;
}
.expandableBox .bottom
{
background-image:url("/images/backgrounds/bkg_whitebox_b.png");
background-repeat: repeat-x;
background-position:bottom;
height:10px;
margin-bottom:7px;
}
.expandableBox .bottomLeft
{
height:10px;
padding:0px 0px 0px 10px;
background-image:url("/images/backgrounds/bkg_whitebox_bl.png");
background-repeat: no-repeat;
background-position:left bottom;
}
.expandableBox .bottomRight
{
height:10px;
padding:0px 10px 0px 0px;
background-image:url("/images/backgrounds/bkg_whitebox_br.png");
background-repeat: no-repeat;
background-position:right bottom;
}
.contentBoxMarginLeft
{
margin-left:10px;
}
.contentBoxMarginRight
{
margin-right:10px;
}
.contentBoxMarginTop
{
margin-top:10px;
}
.contentBoxMarginBottom
{
margin-bottom:10px;
}
.fullContentBox
{
width:940px;
float:left;
}
.largeContentBox
{
width:700px;
float:left;
}
.mediumContentBox
{
width:460px;
float:left;
}
.smallContentBox
{
width:220px;
float:left;
}
.mediumContentBox .textContainer
{
float:left;
width:210px;
}
.mediumContentBox .imageContainer
{
float:right;
width:210px;
}
.smallContentBox .textContainer
{
}
.smallContentBox .textContainer .imageContainer
{
float:right;
padding:5px 0px 0px 0px;
}
.smallContentBox .imageContainerAlternate
{
float:left;
padding:0px 0px 0px 0px;
}
a.smallButtonLeft,
a.smallButtonRight
{
display:inline-block;
background-image:url('/images/backgrounds/bkg_sprites_buttons.png');
height:30px;
background-position:left top;
background-repeat:no-repeat;
padding:0px 10px;
line-height:23px;
color: #0F4DBC;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
text-transform: capitalize;
}
a.smallButtonLeft:hover
{
background-position:left -44px;
}
a.smallButtonRight
{
background-position:right -217px;
color: #4D4F52;
}
a.smallButtonRight:hover
{
background-position:right -262px;
}
.boxButtons
{
float:left;
padding:10px 0px 0px 0px;
}
.smallContentBox .boxButtons
{
width:200px;
text-align:center;
}
提前致谢。
1 个答案:
答案 0 :(得分：4)
可能与边距折叠有关。我试图只在左边有边距，然后在第一个边距左边：0。
或者，在浮动的div或父容器上尝试我们的老朋友“zoom：1”。经常修复很多比较模糊的IE怪异。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？