calc() 在背景位置设置时会导致 IE 9 崩溃

Posted 2023-03-06

【中文标题】calc() 在背景位置设置时会导致 IE 9 崩溃

【英文标题】：calc() is crashing IE 9 when set on background-position

【发布时间】：2014-01-28 09:12:54

【问题描述】：

我正在使用calc() 将图像定位在距离响应式容器右侧 10 像素的位置。我有这样的声明：

background-position: calc(100% - 10px) 6px;

每当我尝试：

将该 CSS 正常加载到页面中或 通过开发者工具输入

IE 9 完全崩溃。开发者工具中没有错误，只是直接崩溃。这适用于所有其他（未来）浏览器，但我的目标是也支持 IE 9。

calc() 似乎适用于其他属性，例如 margin 和 width 就好了。以下是相关元素的完整 CSS 跟踪：

这里设置为98%，但是当我在background-position-x 上使用calc 时（如上所示）IE 9 崩溃。

谢谢！

【问题讨论】：

这里只是在黑暗中拍摄，但请尝试background-position: calc(100% - 10px) calc(6px + 0);。

【参考方案1】：

这里有点像在黑暗中拍摄。但也许可以试试：

background-position: expression(100% - 10px) 6px;

仅供参考：我对表达式（）不是很有经验。然而，我过去曾使用它在移动浏览器上实现类似的目标。也许它会在 IE 中为你工作。

【参考方案2】：

我发现这篇文章Positioning background from element’s bottom-right corner

所以你的问题的解决方案是这样的：

background-position: 6px right 10px;

【参考方案3】：

作为calc() 的替代方案，您可以使用top/right/bottom/left 关键字来指定不同的边缘（而不是默认的左上角）来偏移背景内容。

background-position: right 10px top 6px; /* 10px from the right, 6px from the top */

http://www.w3.org/TR/css3-background/#the-background-position

如果给定两个值……第一个代表水平位置……第二个代表垂直位置。 … 值表示背景图像左上角与背景定位区域左上角的偏移量。

如果给出了四个值，则每个值都表示一个偏移量，并且必须在前面加上一个关键字，该关键字指定从哪条边给出偏移量。

如果您更喜欢calc()，但又想防止旧版浏览器崩溃，您可以定义一个备用值（calc() 是 not supported，在 IE9 中为 background-position）。

background-position-x: 98%;
background-position-y: 6px;
background-position: calc(100% - 10px) 6px; 

【参考方案4】：

不使用 calc 或表达式，对我有用的是使用绝对定位的元素并使用 left 和 right 属性拉伸图像。

.bg_img
  position:absolute;
  top:0;
  bottom:0;
  left:-10px;
  right:-10px;

在大多数情况下，负像素不是必需的，但对我来说，这就是我试图使用 calc() 实现的目标。

希望这对某人有所帮助！