css中margin没有效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css中margin没有效果相关的知识，希望对你有一定的参考价值。
好诡异啊，写了一段代码，margin不起作用，但是重新建了文件，复制过去就起作用了，我一遍遍对比了两边代码，连冒号和分号都重新写了一遍，什么原因？
html+css
id>class
CSS：左边距的 IE 9 hack？ \9;没有效果
【中文标题】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 添加在上面
【参考方案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）中自找麻烦。
【讨论】：
以上是关于css中margin没有效果的主要内容，如果未能解决你的问题，请参考以下文章