InternetExplorer-CSS:IE9破解左边空白9;没有效果

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

通常，我会通过添加9;来进行IE破解，例如：

margin-left: 10px9;

但它似乎对利润率不起作用。有人知道如何做到这一点吗？非常感谢！

<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: 10px9;
    margin-top: 160px;
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    white-space:nowrap;
}

如果你真的需要，你可以使用IE条件块：

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

发现是

 writing-mode:tb-rl;

IE不喜欢。

这个网站很有用：

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

.class {
     text-align:right;
     @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     margin-left: 30px
     }
     margin-left: 90px;
 }

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

您可以像这样使用

<!--[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。

为什么在使用position:absolute的同时使用margin left？使用绝对仓位时，您永远不会获得所需的保证金效果(但这不是实际的问题(。

当使用绝对位置时，您应该始终定义元素的默认基准点，该基准点至少由顶部/底部和左侧/右侧位置组成——在您的情况下，顶部：0；左：110px；(这是假设绝对定位的元素在一个位置内：相对；父容器(。

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

使用绝对定位并没有严格定义元素的位置，这是在IE(尤其是lt IE9(中制造麻烦。

相关内容

最新更新

热门标签：