IE7显示问题（添加额外的上边距） [英] IE7 display issues (adding extra top margin)
问题描述
href =http://imgur.com/lwyRI.png =nofollow> http://imgur.com/lwyRI.png
正确的页面将有三个黑色选项卡连接到上面的图形。
这是它应该看起来：也存储在imgur：64qbf.png
（我只允许一个链接）
页面链接可以在img中找到。 （再次我只能发布一个链接）
请帮助！
css代码：
< style type =text / css>
#background {
background-image：url（/images/store/vaporIronBK.jpg）;
background-repeat：no-repeat;
height：auto;
width：665px;
margin-top：125px;
margin-left：228px;
padding-top：5px;
font-size：15px;
}
#background a {
color：#ffffff;
text-decoration：none;
}
#background a：hover {
color：＃de156d;
}
#videoLinks {
margin-top：52px;
height：100px;
}
#buy {
width：400px;
float：left;
clear：both;
padding-left：235px;
color：＃000000;
}
#video {
float：right;
left：683px;
margin-left：35px;
margin-top：166px;
width：200px;
color：＃000000;
}
#video a {
text-decoration：none;
color：＃000000;
}
#video a：hover {
color：＃de156d;
}
#footnotes {
color：#ffffff;
margin-top：37px;
}
＃bottom-text {
margin-left：40px;
margin-top：445px;
width：575px;
}
＃bottom-text a {
颜色：＃de156d;
text-decoration：none;
}
＃bottom-text a：hover {
color：＃000000;
}
＃bottom-text p {
text-align：justify;
}
＃bottom-text h2 {
font-size：25px;
color：＃000000;
padding-bottom：10px;
}
＃bottom-text h3 {
padding-bottom：5px;
}
＃bottom-text p {
padding-bottom：20px;
}
＃bottom-text .header-text {
padding-bottom：25px;
}
＃bottom-text p.taylor-image {
text-align：center;
}
.tabs {
height：30px;
width：180px;
float：left;
margin-left：30px;
padding-top：10px;
}
< / style>
< body>
<！ - [if IE]>< div class =ie><！[endif] - >
... LALALA
<！ - [if IE]>< / div><！[endif] - >
< / body>
这称为条件注释。
现在您可以使用.ie ancestor指定IE特定的规则。
得到一些.ie #whatever {position：relative;}然后把那些
盒子放在他们应该是的地方！
I am having a really tough time figuring out why IE7 adds extra padding to the this page!
This is what IE7 is doing: http://imgur.com/lwyRI.png
The correct page would have the three black tabs connected to the graphic above. This is how its supposed to look: also stored on imgur: 64qbf.png (i am only allowed one link)
The page link can be found in the img. (again i can only post one link)
please help!
css code:
<style type="text/css">
#background{
background-image: url(/images/store/vaporIronBK.jpg);
background-repeat:no-repeat;
height:auto;
width:665px;
margin-top:125px;
margin-left:228px;
padding-top:5px;
font-size:15px;
}
#background a {
color: #ffffff;
text-decoration: none;
}
#background a:hover {
color: #de156d;
}
#videoLinks {
margin-top:52px;
height: 100px;
}
#buy{
width:400px;
float:left;
clear:both;
padding-left:235px;
color:#000000;
}
#video {
float: right;
left: 683px;
margin-left: 35px;
margin-top: 166px;
width: 200px;
color: #000000;
}
#video a {
text-decoration: none;
color: #000000;
}
#video a:hover {
color: #de156d;
}
#footnotes {
color:#ffffff;
margin-top: 37px;
}
#bottom-text {
margin-left:40px;
margin-top:445px;
width:575px;
}
#bottom-text a {
color: #de156d;
text-decoration: none;
}
#bottom-text a:hover {
color: #000000;
}
#bottom-text p {
text-align: justify;
}
#bottom-text h2 {
font-size: 25px;
color: #000000;
padding-bottom: 10px;
}
#bottom-text h3 {
padding-bottom: 5px;
}
#bottom-text p {
padding-bottom: 20px;
}
#bottom-text .header-text {
padding-bottom: 25px;
}
#bottom-text p.taylor-image {
text-align: center;
}
.tabs {
height: 30px;
width: 180px;
float: left;
margin-left: 30px;
padding-top: 10px;
}
</style>
I do this to every page:
<body>
<!--[if IE]><div class="ie"><![endif]-->
...LALALA
<!--[if IE]></div><![endif]-->
</body>
It's called a conditional comment. It's IE proprietary, but acts like a comment to other browsers and validators.
Now you can specify IE specific rules using .ie ancestor.
get some .ie #whatever{position:relative;} going on and put those boxes where they're supposed to be!
这篇关于IE7显示问题（添加额外的上边距）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
