IE 条件注释不起作用答案

【问题标题】：IE conditional comments aren't workingIE 条件注释不起作用
【发布时间】：2014-04-02 21:12:34
【问题描述】：

我正在使用 IE (Internet Explorer) 条件 cmets 来修复 IE 上的边距问题，但由于某种原因它不起作用，我无法修复它。

CSS 代码（嵌入在条件注释中）：

<!--[if IE]>
   <style>
.right_header_form{
    float: right;
    margin: -360px 50px 0;
    width: 240px;
    height: auto;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    line-height: 21px;
    padding: 0px;
    background-color: #444;
    color: #FFF;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 10px 15px;
}
.right_form {
    float: right;
    margin: -320px 50px 0;
    width: 240px;
    height: auto;
    background-color: #F5F5F5;
    color: #666;
    margin-bottom: 20px;
    padding: 15px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
  </style>
<![endif]-->

我所有其他浏览器的原始 CSS 代码：

.right_header_form{
    float: right;
    margin: -390px 50px 0;
    width: 240px;
    height: auto;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    line-height: 21px;
    padding: 0px;
    background-color: #444;
    color: #FFF;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 10px 15px;
}
.right_form {
    float: right;
    margin: -350px 50px 0;
    width: 240px;
    height: auto;
    background-color: #F5F5F5;
    color: #666;
    margin-bottom: 20px;
    padding: 15px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

如您所见，每个代码之间的边距不同。正如我所说，它不起作用，但似乎代码是有效的。

问：如何仅使用条件 cmets 更改 IE 的 CSS 代码？

【问题讨论】：

@NiettheDarkAbsol 好吧，我使用了margin，所以IE浏览器有点问题。
哪个版本的 IE。 IE11 不识别条件 cmets。
我认为这很可能是因为在同一个容器中添加了填充和宽度。 IE 使用不同的盒子模型：456bereastreet.com/archive/200612/…
我认为边距不是问题..请创建一些屏幕截图等以显示问题所在..
可能，Sigma 是对的，这是一个box-sizing 问题。添加 doctype 将使 IE 切换到内容框模型。

标签： css internet-explorer margin conditional-comments

【解决方案1】：

请注意，条件注释仅适用于 INTERNET EXPLORER 9 及更低版本，IE10 及更高版本已被禁用。

我建议您将 IE CSS 放在另一个名为 iestyle.css 的 css 文件中，并像这样调用它：

<!--[if IE]>
  <link rel=”stylesheet” type=”text/css” href=”iestyle.css”/>
<![endif]-->

这必须有效，

祝你好运。

PS：还有

您可以在 HTML 中使用条件 cmets 将不同的 CSS 类或 ID 应用到您可以使用 CSS 定位的元素。

像这样工作：

<!--[if IE]>
  <div id="content" class="ie">
<![endif]-->
<!--[if !IE]>
  <div id="content">
<![endif]-->

这对IE 的作用是添加您在CSS 中指定的类“ie”，当它不是IE !IE 时，它不会添加该类。

【讨论】：

【解决方案2】：

问题是

margin: -390px 50px 0;

基本上，你猜.main_form的高度是390px，所以你让.right_header_form向上390px。

这很糟糕。

在对页面进行编码之前，您必须考虑一个好的设计。

在这种情况下，制作两列并将它们放在另一列旁边浮动第一列（第二列可选）。并将标题放在每一列内。

【讨论】：

【解决方案3】：

    <!--[if IE]>
        <style>
            .right_header_form{
                margin: 20px 0 0;
            }
            .right_form {
                margin: 20px 0 0;
            }
        </style>
    <![endif]-->
    <link rel="stylesheet" href="css/style.css" type="text/css" />

从 mediafire 检查了您的 PHP 代码。
您的 IE 样式已被覆盖，因为 IE 条件位于代码的首位。应该是第一个style.css。 CSS 优先级。

应该是：

    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <!--[if IE]>
        <style>
            .right_header_form{
                margin: 20px 0 0;
            }
            .right_form {
                margin: 20px 0 0;
            }
        </style>
    <![endif]-->

【讨论】：

它没有改变任何东西，在 Firefox 中它可以工作，但 IE 没有。
您的 html 中还有一个错误。图片需要 alt 属性。
@Sigma：这不是“错误”，因为 HTML 没有真正的错误；它不应该影响这个问题。但是，当然，省略 alt 是不标准的。
使用负边距会使布局的渲染复杂化。也许尽量避免这一切。并在相关容器上使用填充来添加具有正值的垂直间距或上边距。