enter image description here我在Edge和所有其他IE版本中都遇到了一个奇怪的问题。问题是我声明了一个div并在该div上设置了一些属性。最初我将宽度设置为:1140px,但是当屏幕调整为它的最大宽度:1200px,我将div宽度设置为:100%。所有这些更改在chrome,firefox,opera,safari中都可以正常使用,但是当我在边缘或任何IE版本中测试此代码时,它在右侧占用了太多空间设备屏幕。
header{
width: 100%;
height: 500px;
position: relative;
}
.beast-text-box {
position: absolute;
width: 1140px;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
@media only screen and (max-width: 1200px) {
.beast-text-box {
width: 100%;
}
}
<header>
<div class="beast-text-box">
<h1 class="heading-h1">TRAIN LIKE A BEAST</h1>
<a href="#" class="btn-full js--scroll-to-plan">BEAST MODE</a>
<a href="#" class="btn-full js--scroll-to-start">SHOW ME MORE</a>
</div>
</header>
答案 0 :(得分:2)
transform
导致IE中出现问题。在CSS下方尝试在媒体中.beast-text-box
。
position: relative;
left: 0;
transform: translate(0);
header {
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
.beast-text-box {
position: absolute;
max-width: 1140px;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
@media only screen and (max-width: 1200px) {
.beast-text-box {
width: 100%;
/*Added this CSS*/
position: relative;
left: 0;
transform: translate(0);
/*Added this CSS*/
}
}
<header>
<div class="beast-text-box">
<h1 class="heading-h1">TRAIN LIKE A BEAST</h1>
<a href="#" class="btn-full js--scroll-to-plan">BEAST MODE</a>
<a href="#" class="btn-full js--scroll-to-start">SHOW ME MORE</a>
</div>
</header>
答案 1 :(得分:1)
我进行了以下更改,然后开始工作! header
CSS中缺少分号,我改为width: 1140px;
而不是max-width: 1140px;
。我想发生的是,left: 50%
和width: 1140px
一起增加了总宽度,并迫使水平滚动条显示在IE11中。
header{
width: 100%;
height: 500px;
position: relative;
overflow:hidden;
}
.beast-text-box {
position: absolute;
max-width: 1140px;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
@media only screen and (max-width: 1200px) {
.beast-text-box {
width: 100%;
}
}
<header>
<div class="beast-text-box">
<h1 class="heading-h1">TRAIN LIKE A BEAST</h1>
<a href="#" class="btn-full js--scroll-to-plan">BEAST MODE</a>
<a href="#" class="btn-full js--scroll-to-start">SHOW ME MORE</a>
</div>
</header>