css - calc() 在 background-position 上设置时崩溃 IE 9

Question

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

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

每当我尝试:

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

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

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

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

谢谢!

Answer 1

作为 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

If two values are given … the first represents the horizontal position … the second represents the vertical. … Values represent an offset of the top-left corner of the background image from the top-left corner of the background positioning area.

If four values are given, then each represents an offset and must be preceded by a keyword that specifies from which edge the offset is given.

如果您更喜欢 calc() 但又想防止旧浏览器崩溃，您可以定义一个回退值(calc() 是 not supported for IE9 中的背景位置)。

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