calc() 100% + #px

Question

我正在努力实现一些我甚至不太确定是否可能实现的目标。

我正尝试在我的站点的导航下放置一个特殊的阴影PNG图像。不过，我也想在站点上的任何对象上重用此功能，无论是图像、div还是按钮。基本上对任何对象都使用相同的阴影图像。

使用css3的calc()函数，我尝试做对象的高度@ 100% + 25px (png的高度)。

我尝试过设置样式：

height: -webkit-calc(100% + 25px); 
height:    -moz-calc(100% + 25px); 
height:      -o-calc(100% + 25px); 

但从我在Firebug中收集的信息来看，100% + 25px是新的100%，因为这没有任何效果。

我也试过了：

height: -webkit-calc(100% + 25px); 
height:    -moz-calc(100% + 25px); 
height:      -o-calc(100% + 25px); 
background-position: 0 -moz-calc(100% + 25px);

但是这里也没有joy。

如果我使用calc(3em +25px)，它没有问题，但它不够灵活，不能在任何对象上工作。

这有可能吗？我说的有道理吗？！

Answer 1

我不是100%确定，但working draft描述了计算两端的运算符形成(单一类型的)子表达式。

由于您将相对值(%)与绝对值(px)组合在一起，因此可能无法完成计算。

更新：我做了一个小测试，它似乎工作得很好。你确定你在html中的选择器和位置是正确的吗？检查此Fiddle。