来源: CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器，以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在52CSS.com大量的技术文档中，也包含了这方面的内容。轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧。希望对您的学习、工作有所帮助，如果您依然有疑问，欢迎您到52CSS.com查阅、搜索相关内容。
一、 针对浏览器的选择器
这些选择器在你需要针对某款浏览器进行css设计时将非常有用。
IE6及其更低版本 * html {} IE7及其更低版本 *:first-child+html {} * html {} 仅针对IE7 *:first-child+html {} IE7和当代浏览器 html>body{} 仅当代浏览器(IE7不适用) html>/**/body{} Opera9及其更低版本 html:first-child {} Safari html[xmlns*=""] body:last-child {} |
要使用这些选择器,请将它们放在样式之前. 例如:
#content-box { width: 300px; height: 150px; } |
四、给行内元素定义宽度
如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括：<span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素。
span { width: 150px; display: block }
五、让固定宽度的页面居中
为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto.
#wrapper { margin: auto; position: relative; } |
六、IE6双倍边距的bug
给此对象加上display:inline即可解决问题。
七、Box Model 盒模型bug的一般解决办法
八、两个层之间的3px间隙
九、在IE中的HTML注释引起文字奇怪的复制
十、图片替换技术
文字总比用图片做标题好一些. 文字对屏幕阅读机和SEO都是非常友好的.
|
HTML: <h1><span>Main heading one</span></h1> CSS: h1 { background: url(heading-image.gif) no-repeat; } h1 span { position:absolute; text-indent: -5000px; } |
分类:CSS
阅读:
评论: