我的网页需要在现代浏览器(例如Chrome)中运行,也需要在较旧的浏览器(例如IE11)中运行。
大部分方法都有效,但是当我尝试使用div
将按钮放在容器父级calc (left: calc(50% - 40px);)
的中间时,它将在IE11中不起作用,而是放置在父级容器之外。
这是我的CSS代码:
.buttonContainer {
position: fixed;
width: 336px;
height: 62px;
background-color: #fff;
display: inline-block;
text-align: center;
vertical-align: middle;
margin-bottom: 10px;
box-shadow: 0 0 2px 0 #d2d2d2;
}
.button {
position: fixed;
left: calc(50% - 40px);
.color {
background-color: #ff0033;
color: #ffffff;
display: inline-block;
height: 26px;
width: 64px;
margin-top: 10%;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
text-align: center;
vertical-align: middle;
line-height: 28px;
}
}
上面的代码将在现代浏览器中工作,其中
.button
位于buttonContainer
的中间,但在IE11中位于其外部。 最佳答案
使用calc IE可能会有点困难。一种解决方案是将left
设置为50%
,然后使用变换来校正按钮的宽度,如下所示:
.button {
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%); // -50% of the width of the button
}
要记住的另一件事是,位置固定将使元素相对于浏览器窗口定位,因此不要相对于它的包含元素(除非包含元素是浏览器窗口:)。
关于html - CSS“计算”功能无法在Internet Explorer 11中正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56181081/