CSS样式在IE中不起作用，但仅在Chrome中起作用

Question

我想知道为什么这种风格在IE和FF中不起作用，而只在Chrome浏览器中起作用

#show{top:10%; position:relative; margin: 0px auto; width:100%;}

[编辑]

如果我想在IE和FF中做同样的工作，我该怎么做

由于 让

Answer 1

您是否也可以提供相关的HTML标记？你正在使用哪个版本的IE。

一个问题可能是额外的CSS样式，ID为'show'的元素继承。

Answer 2

要在IE和FF之间分隔样式，Chrome等使用Conditional Comments。

<!--[if lt IE 9]>
<link href="path-to-file/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->

这将告诉IE使用与IE，FF和其他浏览器不同的样式表。

IE是一种野兽，如果没有一些试验和错误就无法工作，所以设置样式表并使用它直到你做你想要的。

要在样式表中分隔样式，请使用此选项;这是一个很好的资源，并帮助了我很多！ CSS browser selectors。它是一个Javascript插件，可以读取任何以.webkit，.ie等开头的样式，并仅将这些样式应用于该浏览器。

Answer 3

你是否试图将#show div从包含div的顶部放下10％？如果是这样，试试这个：

HTML：

<div id=#your_container>
  <div id=#show>
    Content
  </div>
</div>

的CSS：

#your_container {height: 200px; position: relative}
#show {top: 10%; position: absolute}

Answer 4

  

顶部：10％;位置：相对;

10%什么？对于相对定位元素，百分比尺寸是相对于父元素的大小来测量的。父元素是否已应用height:？如果没有，那就是你没有动作的原因：你说的是“将顶部移动'自动'的10％，这是一个不确定的数量。”

如果您想要10%浏览器视口高度，则必须告诉根html和您定位的元素之间的每个元素使用其父级的完整高度。即：

html, body { height: 100%; }