首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

css hack的应用

2012-12-30 
css hack的使用!–[if !IE]!– 除IE外都可识别 !–![endif]–!–[if IE] 所有的IE可识别 ![endif]–

css hack的使用

  • <!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>
  • <!–[if IE]> 所有的IE可识别 <![endif]–>
  • <!–[if IE 5.0]> 只有IE5.0可以识别 <![endif]–>
  • <!–[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]–>
  • <!–[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]–>
  • <!–[if IE 6]> 仅IE6可识别 <![endif]–>
  • <!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
  • <!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>
  • <!–[if IE 7]> 仅IE7可识别 <![endif]–>
  • <!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–>
  • <!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>

    CSS类级别的hack

    仅IE7识别 *+html {…}?

    IE6及IE6以下识别 * html {…} ?

    opera、safari、chrome识别:

    @media all and (min-width: 0px){…} ?//Firefox3.0.6不识别,但Firefox3.6也识别该规则,如果Firefox版本有严格要求,请使用下一条规则

    @media screen and (-webkit-min-device-pixel-ratio:0){…} ?//IEFirefox不识别该规则

    仅opera识别:

    @media screen and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0{…}??

    ?CSS属性级别的hack

    仅IE识别 : margin-left:10px\9;?

    仅IE8识别? :? margin-left:10px\0;?

    IE6/IE7识别? :? *margin-left:10px;?

    仅IE6识别 :?? _margin-left:10px;?

    CSS Hack综合示例:

    /**add 'margin-top: -10px;' for IE7/Firefox/Opera/Safari/Chrome , 'margin-top: 5px;' for IE8? **/

    .news_list01 h2 span{float: right; margin-top: 5px; *margin-top: -10px; display: inline}

    @media all and (min-width: 0px){

    ???? .news_list01 h2 span{float: right; height: 19px; margin: 0 0 0 0; padding-top: 16px; padding-bottom: 0; display: inline}

    }

    HTML代码片断级别的hack(仅IE识别)

    ① <!--[if !IE]> 除IE外都可识别的代码片断<![endif]-->

    ② <!--[if IE]> 所有的IE可识别的代码片断 <![endif]-->

    ③ <!--[if IE 7]> 仅IE7可识别的代码片断 <![endif]-->

    ④ <!--[if lt IE 7]> IE7以及IE7以下版本可识别的代码片断<![endif]-->

    ⑤ <!--[if gte IE 7]> IE7以及IE7以上版本可识别的代码片断 <![endif]-->

    用脚本设置CSS属性设置元素的style样式

    Var spanElement = document.getElementById(“mySpan”);

    //下面写法保证出IE外,所有浏览器可用

    spanElement.setAttribute(“style”,”font-weight:bold;color:red;”);

    //下面的写法保证IE可用

    spanElement.style.cssText=”font-weight:bold;color:red;”;

    设置元素的class属性

    Var element = document.getElementById(“myElement”);

    //下面的写法保证除IE外,所有浏览器可用

    Element.setAttribute(“class”,”styleClass”);

    //下面写法保证IE可用

    Element.setAttribute(“className”,”styleClass”);?

    具体CSS效果的实现按钮悬停时鼠标呈现手的形状

    cursor:hand和cursor:pointer效果是一样的,当鼠标移动至该元素时呈现手的形状。但是应该尽量使用cursor:pointer而非cursor:hand,因为cursor:hand只有IE识别,而cursor:pointer才是CSS2.0的标准属性,IE之外的浏览器也支持。

    窗口滚动条显示问题

    在使用弹出窗口或者框窗口架的时候,有时会有多余的滚动条出现,这时需要从多个方面进行确认:

    1. 弹出窗口时window.open方法参数中设置的窗样式是否定义了scroll=yes
    2. 框架标签的属性中是否设置了scrolling=“yes”
    3. 窗口或框架内页面的CSS中,是否对html或body的overflow进行了样式定义,如果没有请参考如下代码。

    html {

    ???? margin: 0;

    ???? padding: 0;

    ???? overflow-x:hidden;

    ???? overflow-y:hidden;

    }

    line-height 属性

    line-height行高指的是文本行的基线间的距离,即字体最底端与字体内部顶端之间的距离。如下图所示:

    文本之间的空白距离(行距)不仅仅是行高决定的,同时也受字号的影响。有时侯同一行内的不同元素底边没有对齐,有可能就是行高不统一造成的,这时关调整高度和对齐方式是不够的,还需要调整line-height属性。

    display:inline-block

    display 属性有三个值:block,inline,inline-block。其中display:block就是将元素显示为块级元素;display:inline就是将元素显示为行内元素;display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。

    l??????? block元素的特点是:总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度。<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子, display属性默认值为block。

    l??????? inline元素的特点是: 和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子, display属性默认值为inline。

    l??????? inline-block的元素特点:呈现为内联对象,四周元素保持在同一行,但可以设置宽度和高度地块元素的属性,目前IE8、Firefox3、Opera、Safari都可以支持该属性了。

    div中的文字自动换行问题

    目前控制换行是使用以下CSS:

    div.content {

    ???? word-wrap:break-word;

    ???? overflow:hidden;

    }

    在 IE 、Firefox、Safari、Chrome下没有任何问题,但是在 Opera下,长串英文会被遮住超出的内容。如果想要让长串英文字符也自动换行,还需要设置word-break:break-all; (但是,此方式会导致普通的英文语句中的单词会被断开,ie下也是)。英文单词在排版规则上不应该被断开,长串英文字符其实就是一个比较长的单词,自然也不需要断开换行显示了,所以一般不需要额外设置word-break:break-all; 。

    textarea中的文字自动换行问题

    在textarea中设置输入内容的自动换行,也是在CSS中设置word-wrap:break-word;属性。需要额外注意的是textarea元素本身有一个warp属性,其取值含义如下:

    l??????? off:不自动换行;

    l??????? hard:自动硬回车换行,换行标记一同被传送到服务器端(Opera、Chrome下不传);

    l??????? soft:自动软回车换行,换行标记不会传送到服务器端。

热点排行