CSS:'display'属性的无意义值会导致问题吗？

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最终显示:none,但如果他们这样做,则div最终显示一个无意义的值,并显示整个div.

它适用于IE8,IE9,FF14,Chrome

我不应该这样做的原因？

Answer 1

不,那绝对没问题; 在CSS中,浏览器无法理解的值不会导致错误,它只是忽略该值并显示该元素的默认设置.

[为]非法价值观.用户代理必须忽略具有非法值的声明.例如:

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