Internet Explorer 7.0 CSS 黑客答案

【问题标题】：Internet Explorer 7.0 CSS HackInternet Explorer 7.0 CSS 黑客
【发布时间】：2011-04-28 03:01:55
【问题描述】：

我需要在网页中插入 Hack，所以它在 IE7.0 上运行良好但我做事的方式有问题。应该很简单。

实际的CSS代码如下：

<style type="text/css">
body { margin:0;}
#home_splash { background-image:url(homeimages/image-background.jpg);background-repeat:repeat-x; background-position:left top;}
#home_splash #home_text { height:470px; padding-top:25px;padding-left:38px; }
#home_splash #home_text_1,
#home_splash #home_text_2 { display:none; }
#home_splash #home_text_1 { width:172px; height:58px; top:0px; left:70px; position:relative; background:inherit; background-position: -70px 0px; }
#home_splash #home_text_2 { width:212px; height:27px; top:460px; left:868px; position:relative; background:inherit; background-position: -868px -460px; }
#home_splash {background-color:#d1d1d9;margin-top:-15px; background-repeat:repeat;width:100%; }
#home_splash .picture { background-image: url(homeimage/image.jpg); width:960px; height:520px; display:block; margin-top:20px; margin-left :auto; margin-right:auto; }
#home_splash #boxes { margin-left:auto; margin-right:auto;padding-top:0px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#666; font-size:12px; font-weight:bold; height:190px; width:930px;}
#home_splash #boxes .box { width:33%; float:left; display:block;background-repeat:repeat-x;}
#home_splash #boxes h3 { font-size:23px; border-bottom: 1px solid #bcbcc4; color:#000033; margin:0; }
#home_splash #boxes h3,
#home_splash #boxes p {margin: 4px 25px; }
#home_splash #boxes p { line-height:160%; }
#home_splash #boxes .box_separator { border-right:1px solid #eee;}
ul#nav { width:100%; height:37px; margin:0px;display:block; background-color:#000; background-repeat:repeat-x; }
#container {background-color:#d1d1d9; zoom:1; }
#content { margin:0; } 
.splash_text {width:885px; height:463px;}
</style>

我想在这个 CSS 中进行一次更改。

我想更改以下行：

#home_splash .picture { background-image: url(homeimage/image.jpg); width:960px; height:520px; display:block; margin-top:20px; margin-left :auto; margin-right:auto; }

我希望 IE7.0 删除 'margin-top:20px;'属性 - 但仅在此 html 文件中内联

【问题讨论】：

如果有CSS不一致，可以在jsfiddle上重新创建吗？有时有一些方法可以在不满足浏览器特定样式的情况下规避。
s/有时/通常/。不幸的是 jsFiddle 不支持 IE

标签： html css cross-browser internet-explorer-7 internet-explorer-6

【解决方案1】：

条件 cmets 正是您所需要的。我假设“rmeove the margin-top: 20px' 属性，你的意思是把它设置为 0（因为真的没有其他方法可以删除它）。这是代码：

<!--[if IE 7]><style type="text/css">#home_splash .picture { margin-top: 0; }</style<![endif]-->

只需将其粘贴在您的 HTML 文件中，在您已有的 CSS 下方，您就应该是金色的。

【讨论】：

【解决方案2】：

由于您正在编写 HTML 文件，目前最简单的选择是条件 cmets：

<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->

请参阅http://www.quirksmode.org/css/condcom.html 了解更多信息。

【讨论】：

【解决方案3】：

如果您希望在与其他浏览器相同的 css 中进行 hack：

    *+ html #home_splash .picture { background-image: url(homeimage/image.jpg);}

看这里： http://css-discuss.incutio.com/wiki/Star_Html_Hack

【讨论】：