Question

我使用此代码居中绝对定位div

.class{
   width: 10px; 
   height:10px; 
   position:absolute;
   left:0;
   right:0;
   top:0; 
   bottom:0; 
   margin:auto
}

这在IE 10及更低版本中不起作用，但我不想更改此代码，因为它适用于所有其他浏览器和设备。

我知道有条件的评论在IE 10中也不起作用，那我怎么能在那里解决这个问题呢？

Answer 1

如果浏览器 IE10 ，您应该通过JavaScript检测到。如果是，您可以在页面正文或任何所需的html元素中添加特殊类。

<强> JS

if (navigator.userAgent.indexOf("MSIE 10") > -1) {
    document.body.classList.add("ie10");
}

<强> CSS

.ie10 {
    ...
}

Answer 2

除了上面提到的选项之外，你还有其他选择：

计算的填充+宽度：

.container {
  padding:5%;
}
.container .center{
  width:90%;
  height:90%;
  display:block;
}

或者如果您只需要水平居中：

.centered {
  width:80%;
  margin:0 auto;
}

但是，如果您仍然无法获得任何结果，那么您可能会出现格式错误的HTML。当Internet Explorer发现错误的HTML或表达特定版本的元标记进行模拟时，新功能将会起作用。我在JSFIDDLE重新创建了你的风格，它甚至在互联网浏览器8上也适用于我（虽然7确实失败了）。否则，如果父元素的CSS不合适，您可能不会在父元素的CSS上放置位置值。

替代IE 10条件注释以居中定位div

2 个答案: