浮动引起的文本重影
在做项目开发时遇到了一个怪异现象“整段内容被重影”的问题,一般来说这类问题在IE6中表现的比较多,但这次出人意料的是IE7也殃及在内。在早前互联网上就有分享过使用HTML注释会引起类似的文字倒影问题,但此时的页面却是没有任何注释~,持续地测试分析问题变得越来越有趣了…
Thems style: Alpha 10% Alpha 30% Alpha 50% Alpha 70% Alpha 90%
在做项目开发时遇到了一个怪异现象“整段内容被重影”的问题,一般来说这类问题在IE6中表现的比较多,但这次出人意料的是IE7也殃及在内。在早前互联网上就有分享过使用HTML注释会引起类似的文字倒影问题,但此时的页面却是没有任何注释~,持续地测试分析问题变得越来越有趣了…
当元素设置浮动(float)后会被移出文档流,相信大家都会经常遇到这样的问题。
这问题的解决办法有N种之多,因为每种浏览器对CSS的解析各异,所以在不同浏览器使用清除浮动的元素也会有所不同。
我认为目前还没有最好的清除浮动元素或组合,而是根据情况分析而选择,最好的清除浮动元素或组合。
为了兼容不同浏览器,可能要使用不同的清除浮动元素组合使用,如:{overflow:hidden; zoom:1;}、{display:table; width:100%;}、{overflow:hidden; height:1%;}
以下分析了部份的消除浮动元素对浏览器的支持: