首頁 > web前端 > html教學 > CSS Hack的一些知識

CSS Hack的一些知識

WBOY
發布: 2016-10-23 00:00:09
原創
982 人瀏覽過

测试环境:Windows7
主要测试:IE6、IE7、IE8、Fire Fox3.5.6
次要测试:Chrome4.0、Opera10.10、Safari4.04、360浏览器3.1

为了能够让多个Hack在同一个例子里,现对实例页面做如下要求是:

1、左右有两个DIV分别是#menu,#content,字体颜色为白色。
2、#menu高度500px,#content高度600px。
3、#menu宽度200px,#content宽度是自适应(因为是自适应所以常用的加float的方法不能解决3pxBug)。
4、在#content中写入一段文字且与红色区域边距为50px。

 

  1. 代码在各种浏览器下进行测试的结果如下:
  2. IE6
  3.  

  4. IE8、firefox、Opera、Chrome

  5.  

    通过浏览器的测试我们可以比较出:
    1、IE6与IE7效果对比基本一致,但IE6在两个DIV中间出现了3像素的Bug,这也是非常有名的IE6 3像素Bug。注意:如果对IE6的这两个经典的Bug不熟悉的话请看这两篇文章:《3像素Bug》
    2、IE8和Fire Fox内,红色区域(#menu)盖住了蓝色的区域(#content)。

    提出问题:
    1、解决自适应宽度情况下的IE6 3像素Bug(注:如果宽度是一定的,只需要加上浮动float即可解决,但是在宽度自适应的情况下此方法无效)
    2、解决位置不一致(例如#content中的文字)

    解决方法(利用CSSHack来解决):

  6.  

    * html
    IE6及更低版本的IE并不是将Html标签认定为是最外层的元素,而是认为*(其中*并不是指通用选择器)才是最外层的元素,而HTML被认为是它的子元素。另外只要第一个元素浮动第二个元素不浮动的话,就会出现3像素bug。
    因此既然只有IE6及更低版本“理解”* HTML,那么它就可以作为一种hack来解决浏览器之间的不兼容。
    修改代码如下:
    1. CSS Hack-CSS

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板