Html 100%高度不适用于IE
我目前在IE中显示100%高度的div时遇到一些问题,它在其他浏览器中都可以正常工作,只是IE给了我一些麻烦,我不知道如何解决。Html 100%高度不适用于IE,html,css,internet-explorer,Html,Css,Internet Explorer,我目前在IE中显示100%高度的div时遇到一些问题,它在其他浏览器中都可以正常工作,只是IE给了我一些麻烦,我不知道如何解决。 下面是我的一些代码: HTML: 因此,我有一组相对定位的div,每个div都适合浏览器窗口的大小,就像我说的,除了IE,所有浏览器都可以正常工作,尤其是100%高度样式属性没有被识别。 在做了一点研究后,我发现这可能与表格中的文本有关(这是必要的,因为我想将文本水平和垂直居中),但我不知道如何解决这个问题,任何建议都将不胜感激 这里讨论了许多策略: 这似乎适用于I
下面是我的一些代码:
HTML: 因此,我有一组相对定位的div,每个div都适合浏览器窗口的大小,就像我说的,除了IE,所有浏览器都可以正常工作,尤其是100%高度样式属性没有被识别。
在做了一点研究后,我发现这可能与表格中的文本有关(这是必要的,因为我想将文本水平和垂直居中),但我不知道如何解决这个问题,任何建议都将不胜感激 这里讨论了许多策略: 这似乎适用于IE FF和Chrome:
您可以在不使用表格的情况下将
水平和垂直居中放置。您应该只使用表格来显示表格数据。如果您不知道,显示表格块是垂直居中的更好方法。它在ie7上不起作用,但当你不需要与这个几乎已经过时的浏览器100%兼容时,它可以派上用场。@GarryCairns是的,IE是一个我从未使用过的浏览器,顺便说一句,但似乎有些人仍然使用它(不幸的是)。那么,IE是否会出现表格问题?@user1374796我怀疑是表格造成了问题,这就是为什么我将其作为评论而不是答案发布,但表格会使您的内容更难访问,因此我始终建议避免将其作为布局设备。
<div id="content">
<div id="box-01" class="slide" style="color: #F26964; background-color: #003218;">
<div class="text-content">
TEXT GOES HERE
</div>
</div>
<div id="box-02" class="slide" style="color: #F2F1EF; background-color: #70858E;">
<div class="text-content">
TEXT GOES HERE
</div>
</div>
<div id="box-03" class="slide" style="color: #F2F1EF; background-color: #003218">
<div class="text-content">
TEXT GOES HERE
</div>
</div>
</div>
html, body {
margin:0;
padding:0;
height:100%;
border:none
}
#content {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
}
.slide {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
display: table;
vertical-align: middle;
background: no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.text-content {
text-align: center;
display: table-cell;
vertical-align: middle;
text-transform: uppercase;
}