logo标签列表

CSS: IE 9如何hack margin-left？\9;无效。

cssinternet-explorercross-browserinternet-explorer-9
3

我有一个元素，目前具有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;
}
1
我敢打赌，您需要为IE9使用不同的CSS，因为您的标记无效/破损。一般来说，IE9不应该需要像这样的hack。 - Wesley Murch
1
请发布实际的HTML和CSS，以便我们检查问题所在。 - Wesley Murch
@WesleyMurch 在上面添加了。 - MeltingDog
@WesleyMurch 在 CSS 中添加了上述内容。 - MeltingDog
  1. 在IE9中对我而言运行正常：http://jsfiddle.net/25KjA/2/
  2. 看起来你不需要这个hack，在Chrome和IE9中没有它时看起来一样。你能澄清一下吗？
 - Wesley Murch
显示剩余3条评论
5个回答
1
.class {
     text-align:right;

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

     margin-left: 30px

     }
     margin-left: 90px;
 }

你可以编写特定的IE样式表，然后覆盖其他浏览器的样式表。
1
如果你真的需要，你可以使用IE条件块：
<link href="style.css" rel="stylesheet" />

<!--[if lt IE 10]>
    <style type="text/css">
        .thing {
            margin-left: 10px;
        }
    </style>
<![endif]-->
嗯，没有运气！这很奇怪...如果我进入IE的开发人员工具并找到元素并更改CSS，它就可以工作。它只是忽略样式表上的黑客。 - MeltingDog
@MeltingDog 从你所说的来看，似乎你并没有真正尝试过这个答案（尽管可以承认，它不是一个直接的答案）。要么就是你不确定你期望看到什么效果。 - Wesley Murch
@WesleyMurch 是的，我确实尝试了这个答案，并尝试了几个类似的版本。你的意思是要在 HTML 文档的头部放置 would have written 对吧？ - MeltingDog
1
0
为什么在使用position:absolute时还要使用margin-left呢？ 当使用position:absolute时，您永远无法获得所需的边距效果（但这并不是实际问题）。
在使用position:absolute时，您应始终定义元素的默认数据点，包括至少一个top/bottom和left/right位置 - 在您的情况下，top:0; left:110px; （假设绝对定位的元素在position:relative;父容器内）。
您允许浏览器假设您想要显示什么，而不是实际定义并告诉浏览器您想要显示什么 - 您应该在CSS中构建的所有内容上都毫不含糊地执行此操作。
如果不严格定义要素使用绝对定位的位置，则会在IE中遇到麻烦（尤其是lt IE9）。
0
你可以像这样使用。
<!--[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;  
    }

现在，每个浏览器在相关元素上都会有20像素的左边距，但是IE7、IE8和IE0分别具有10像素、15像素和10像素的左边距。

\9 的黑客已经可以使用了，这也是问题的主题。 - Wesley Murch
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接