CSS Hack

2020-05-19  本文已影响0人  沉默紀哖呮肯伱酔

浏览器类型及版本的不同会造成CSS效果不尽相同

需要针对不同浏览器编写不同CSS

IE6之后浏览器厂家间开始寻求标准统一,但仍允许向前兼容,于是产生了不同的运行模式,浏览器运行模式可以分为:

    混杂模式(Quirks Mode)

    标准模式(Standard Mode)

    准标准模式(Almost Standard Mode)

模式声明方式:

    触发混杂模式:不声明DOCTYPE

    触发准标准模式:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"         "http://www.w3.org/TR/html4/loose.dtd">

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"         "http://www.w3.org/TR/html4/frameset.dtd">

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

    触发标准模式:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

        <!DOCTYPE html>

hack实现方式

    1、CSS 类内部 Hack

    2、选择器 Hack

        *前缀:IE6,比如 *html

        *+前缀:IE7,比如*+html

        @media screen\9{...},只对IE6/7生效

HTML 头部引用Hack

    即IE 条件注释

    只在 IE 下生效

        <!--[if IE]> 这段文字只在IE浏览器显示 <![endif]-->

    只在 IE6 下生效

        <!--[if IE 6]> 这段文字只在IE6浏览器显示 <![endif]-->

    只在 IE6 以上版本生效

        <!--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示 <![endif]-->

    只在 IE8 上不生效

        <!--[if ! IE 8]> 这段文字在非IE8浏览器显示 <![endif]-->

    非 IE 浏览器生效

        <!--[if !IE]> 这段文字只在非IE浏览器显示 <![endif]-->

上一篇 下一篇

猜你喜欢

热点阅读