当在背景位置设置时,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(),但要防止旧的浏览器崩溃,你可以定义一个回退值(calc()是不支持用于background-position在IE9-).

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

Answer 2

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

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

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