今天改项目的时候遇到了一个莫名其妙的属性：text-decoration。这个属性其实只是用来给一段文字加上横线、删除线或下划线的属性。一般用来去掉超链接的底线，或者一些特别强调的效果，但是这么简单的一个属性，为什么莫名其妙呢？继续往下看~项目中遇到的问题我项目中遇到的问题如下。span包裹在div中。我想要“除了这个span，其他所有的文字都有一个底线”，通常看到这个问题一定很简单，只要下面的CSS写法就可以实现：div{font-size:20px;文本修饰：下划线；}divspan{text-decoration:none;}理论上应该是上一段有底线，下一段没有底线，但实际上是有底线通向结尾。.不过我不信邪，怕css权重有问题，所以就直接加了邪important试了一下，发现结果还是一模一样！上帝！你看到鬼了吗？div{字体大小：20px;text-decoration:underline;}divspan{text-decoration:none!important;}既然太诡异了，一定要找出原因，所以我换个角度想，换个颜色试试吧！改了之后才发现，很糟糕。为什么底线是红色的？！div{字体大小：20px;颜色：#f00；文本装饰：下划线；}div跨度{颜色：#00f；text-decoration:none!important;}text-decoration属性定义看到这里，我已经大致知道原因了，最有可能的原因应该是在text-decoration属性的定义上。经过一番调查，终于看到了W3C的说法，主要是text-decoration会给整个父元素加底线，而整个父元素，当然也包含子元素。因为颜色一样，我以为子元素也加了下划线（其实子元素没有加下划线），后来看了这个专门分析兼容性问题的网站，其实text-decoration会根据不同的显示属性确定父级。元素底线是否延伸，例如！如果我今天将span的显示改为inline-block，我会得到不同的结果：div{font-size:20px;颜色：#f00；文本装饰：下划线；}div跨度{显示：内联块；颜色：#00f；text-decoration:none!important;}总结不过由于各个浏览器的渲染不同，原理已经了解，这里就不做太多的测试了，下次遇到再遇到这种就记住了问题可能是父元素和子元素相互干扰造成的，需要特别注意。最后看来这个方法也可以做出莫名其妙的效果...HTML
