CSS：左边距的 IE 9 hack？ \9;没有效果答案

【问题标题】：CSS: IE 9 hack for margin-left? \9; has no effectCSS：左边距的 IE 9 hack？ \9;没有效果
【发布时间】：2013-02-19 09:17:32
【问题描述】：

我有一个当前有margin-left: -110px 的元素，当然，这适用于我在除 IE 之外的所有浏览器中的设计。使用 IE 我需要做到margin-left: 10px

通常，我会通过添加\9; 来完成我的 IE hack，例如：

margin-left: 10px\9;

但它似乎不适用于边距。有谁知道实现这一目标的方法？非常感谢！

<div id="nav">
  <ul>
    <li id="newstab">News</li>
    <li id="offerstab">Offers</li>
    <li id="specialsstab">Specials</li>
  </ul>
</div>

#nav {
    position:absolute;
    margin-left: -110px;
margin-left: 10px\9;
    margin-top: 160px;
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    white-space:nowrap;
}

【问题讨论】：

我敢打赌，您需要为 IE9 使用不同的 CSS，因为您的标记无效/损坏。 IE9 通常不需要像这样的 hack。
顺便说一句，它对我来说很好用：jsfiddle.net/teLRA 你是否重新声明了margin-left 在 hack 之后？
@WesleyMurch 是的，从技术上讲，你是对的。我的左边距实际上是-100px；浏览器
请发布不起作用的实际 HTML 和 CSS。
@WesleyMurch 添加在上面

标签： css internet-explorer cross-browser internet-explorer-9

【解决方案1】：

如果确实需要，可以使用 IE 条件块：

<link href="style.css" rel="stylesheet" />

<!--[if lt IE 10]>
    <style type="text/css">
        .thing {
            margin-left: 10px;
        }
    </style>
<![endif]-->

【讨论】：

嗯，不走运！奇怪...如果我进入 IE 的开发工具并找到元素并更改它的工作原理。它只是忽略了样式表上的技巧
@MeltingDog 从你所说的听起来你实际上并没有尝试过这个答案（尽管不可否认，这不是一个直接的答案）。要么，要么你不确定你期望看到什么效果。
@WesleyMurch 是的，我确实尝试了答案，并尝试了几个类似的版本。你的本意是写在 HTML 文档的标题上，对吧？

【解决方案2】：

发现是

 writing-mode:tb-rl;

IE 不喜欢。

这个网站很有用：

http://www.useragentman.com/IETransformsTranslator/

【讨论】：

【解决方案3】：

.class {
     text-align:right;

     @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

     margin-left: 30px

     }
     margin-left: 90px;
 }

您可以为 IE 编写特定的 css，然后为其他浏览器覆盖其他 css。

【讨论】：

【解决方案4】：

你可以这样使用

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->  
<!--[if IE 8]>     <html class="ie8"> <![endif]-->  
<!--[if IE 9]>     <html class="ie9"> <![endif]-->  
<!--[if !IE]><!--> <html>             <!--<![endif]-->

然后在您的 CSS 中，您可以像这样定位 IE7、IE8 或 IE9：

   .element {  
        margin-left: 20px;  
    }  

    .ie7 .element {  
        margin-left: 10px;  
    }  

    .ie8 .element {  
        margin-left: 15px;  
    }  
    .ie9 .element {  
        margin-left: 10px;  
    }

现在每个浏览器的相关元素的左边距为 20px，但 IE7、IE8 和 IE0 的左边距分别为 10px、15px 和 10px。

【讨论】：

\9 hack 已经起作用了，这是问题的主题。

【解决方案5】：

你为什么要使用 margin-left，而你也使用 position:absolute？使用绝对位置时，您永远不会获得所需的边距效果（但这不是实际问题）。

使用绝对位置时，您应该始终定义元素默认基准点，该基准点至少包含一个顶部/底部和左侧/右侧位置 - 在您的情况下，顶部：0；左：110px；（这是假设绝对定位的元素在 position:relative; 父容器内）。

您允许浏览器假设您想要显示的内容，而不是实际定义和告诉浏览器您想要显示的内容 - 您应该在 CSS 中构建的所有内容上都做到这一点。

在没有使用绝对定位严格定义元素的位置时，你是在 IE（尤其是 IE9）中自找麻烦。

【讨论】：