CSS：“显示”属性的无意义值会导致问题吗？

Question

我使用的 CMS 允许使用大括号的数据占位符，如下所示：

Name: {First_Name} <br> 
Email: {Email} <br> 
Phone: {Phone} <br> 

但是它没有给我任何方法来进行条件输出，比如如果电话字段为空白，我无法隐藏电话线。

CMS 不允许使用 javascript 或服务器端代码。我想出了这个技巧：

Name: {First_Name} <br> 
Email: {Email} <br>
<div style="display:none{Phone}">Phone: {Phone} <br></div> 

如果此人没有电话号码，则 div 以 display:none 结束，但如果有，则 div 以一个无意义的值作为 display 结束，并且整个 div 都显示出来。

适用于 IE8、IE9、FF14、Chrome

有什么理由我不应该这样做？

Answer 1

不，那绝对没问题；浏览器不理解的值，在 CSS 中，不会导致错误，它只是忽略该值并使用该属性的默认设置显示元素。

[For] 非法值。用户代理必须忽略具有非法值的声明。例如：

img { float: left }       /* correct CSS 2.1 */
img { float: left here }  /* "here" is not a value of 'float' */
img { background: "red" } /* keywords cannot be quoted */
img { border-width: 3 }   /* a unit must be specified for length values */

CSS 2.1 解析器将遵循第一条规则并忽略其余规则，就好像样式表是：

img { float: left }
img { }
img { }
img { }

引用：http://www.w3.org/TR/CSS21/syndata.html#parsing-errors