CSS BUG解决方法以及CSS BUG类的小技巧

2019-03-14 23:01:51于丽

九、在IE中的HTML注释引起文字奇怪的复制
  DuplicateCharactersBug很神奇。
十、图片替换技术
  用文字总比用图片做标题好一些.文字对屏幕阅读机和SEO都是非常友好的.
HTML:
<h1><span>Mainheadingone</span></h1>
CSS:
h1{background:url(heading-image.gif)no-repeat;}
h1span{
position:absolute;
text-indent:-5000px;
}
  你可以看到我们对标题使用了标准的<h1>作为标签并且用css来将文本替换为图片.text-indent属性将文字推到了浏览器左边5000px处,这样对于浏览者来说就看不见了.
  关掉css,然后看看头部会是什么样子的.本文由jb51.net整理,转载请注明出处!
十一、最小宽度
  IE6另外一个bug就是它不支持min-width属性.min-width又是相当有用的,特别是对于弹性模板来说,它们有一个100%的宽度,min-width可以告诉浏览器何时就不要再压缩宽度了.
除IE6以外所有的浏览器你只需要一个min-width:Xpx;例如:
.container{
min-width:300px;
}
  为了让他在IE6下工作,我们需要一些额外的工作.开始的时候我们需要创建两个div,一个包含另一个:
<divclass="container">
<divclass="holder">Content</div>
</div>
  然后你需要定义外层div的min-width属性,本文由jb51.net整理,转载请注明出处!
.container{
min-width:300px;
}
这时该是IEhack大显身手的时候了.你需要包含如下的代码:
*html.container{
border-right:300pxsolid#FFF;
}
*html.holder{
display:inline-block;
position:relative;
margin-right:-300px;
}
  Asthebrowserwindowisresizedtheouterdivwidthreducestosuituntilitshrinkstotheborderwidth,atwhichpointitwillnotshrinkanyfurther.Theholderdivfollowssuitandalsostopsshrinking.Theouterdivborderwidthbecomestheminimumwidthoftheinnerdiv.
十二、隐藏水平滚动条
  为了避免出现水平滚动条,在body里加入overflow-x:hidden.
body{overflow-x:hidden;}
  当你决定使用一个比浏览器窗口大的图片或者flash时,这个技巧将非常有用.