当在背景位置设置时，calc（）正在崩溃IE 9

Question

我正在使用calc()将图像从响应式容器的右侧放置10px。我有这样的声明：

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

每当我尝试：

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

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

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

此处设置为98%，但当我在calc上使用background-position-x时（如上所示），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

  

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

     

如果给出了四个值，则每个值都代表一个偏移量，并且必须以关键字开头，该关键字指定给定偏移的边缘。

如果您更喜欢calc()但希望阻止旧浏览器崩溃，则可以在IE9中为calc()定义一个后备值（background-position为not supported - 。< / p>

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

Answer 2

这里黑暗中的一个镜头。但也许可以试试：

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

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

Answer 3

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

因此，您的问题的解决方案将是这样的：

background-position: 6px right 10px;

Answer 4

而不是使用calc或表达式，对我来说有用的是使用绝对定位的元素并使用左右属性拉伸图像。

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

在大多数情况下，负像素并不是必需的，但对我来说，这是我尝试用calc（）实现的。

希望这有助于某人！