文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS "calc“函数在11中不按预期工作

问CSS "calc“函数在11中不按预期工作
EN

Stack Overflow用户

提问于 2019-05-17 06:53:24

回答 1查看 1.3K关注 0票数 0

我的网页需要在现代浏览器(如Chrome )中工作，但也需要在较旧的浏览器(如IE11 )上工作。

其中大部分都能工作，但是当我尝试使用calc (left: calc(50% - 40px);)在容器父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的外部。

html

css

internet-explorer

sass

cross-browser

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-17 06:56:55

使用calc可能会有点困难。解决方案是将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
}

要记住的另一件事是，固定的位置将相对于浏览器窗口定位元素，而不是它包含的元素(除非包含元素是浏览器窗口:)。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56181081

复制

相似问题

问CSS "calc“函数在11中不按预期工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS "calc“函数在11中不按预期工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS "calc“函数在11中不按预期工作
EN