`
RandyWei
  • 浏览: 66809 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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:自动软回车换行,换行标记不会传送到服务器端。

分享到:
评论

相关推荐

    CSSHack解决兼容

    什么是CSS hack: 由于不同的浏览器,对CSS的解析认识不一样,从而导致生成的页面效果不一样,得不到我们所需要的页面效果。 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack

    IE9的css hack使用示例

    标题中的“IE9的css hack使用示例”揭示了随着IE9浏览器的推出,CSS hack也需要相应的更新以适应新版本的特性。IE9作为微软发布的Windows Internet Explorer浏览器的第九个版本,它在CSS支持方面较之IE8有了一些提升...

    css_hack csshack技术

    2. **尽量减少使用Hack**:虽然CSS Hack很有用,但过度依赖会导致维护困难。尽可能采用标准CSS来实现兼容性。 3. **测试**:在实际部署前,务必在目标浏览器中进行全面测试,确保所有Hack按预期工作。 #### 六、...

    CSS hack技巧大全

    了解这些基础后,我们可以结合实例来理解如何使用CSS Hack: **Hack应用情境(一)** 这是一个用于处理IE6、IE7、IE8之间兼容性的例子。通过`\9`和`+`,我们可以逐步分离各个浏览器: ```css .bb{ height:32px; ...

    针对chrome的css hack 使用方法

    本文将详细介绍针对Chrome的CSS Hack使用方法。 首先,我们来理解一下为何需要CSS Hack。浏览器之间的渲染引擎差异是导致CSS Hack存在的主要原因。例如,Internet Explorer(IE)有自己的 Trident渲染引擎,Firefox...

    css safari浏览器识别CSS hack.docx

    描述中则提到了Chrome和Safari的共同点,因为它们都基于WebKit内核,所以可以使用相同的CSS Hack方法。 一个常见的Safari/Chrome Hack是利用@media查询结合WebKit特有的条件。例如: ```css @media screen and (-...

    H5 CSS hack 和浏览器内核

    本文将深入探讨H5 CSS Hack以及与浏览器内核的关系。 首先,我们要明白H5(HTML5)是HTML的最新版本,引入了许多新特性,如语义化标签、离线存储、媒体元素、拖放功能等,极大地提高了网页的互动性和用户体验。然而...

    史上最全的CSS hack方式一览.mhtml

    史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全...

    css hack,escape from css hack

    然而,由于不同浏览器对CSS规范的实现不一致,开发者有时需要使用“CSS hack”来解决兼容性问题。CSS hack是一种技巧,通过特定的语法结构或属性值来针对特定浏览器进行样式调整。尽管这种方法能快速解决问题,但它...

    CSS Hack 浏览器兼容文档

    CSS Hack是一种针对不同浏览器之间解析CSS规则差异的技术,目的是确保CSS样式在各个浏览器中的一致性。在网页设计中,由于各个浏览器(尤其是Internet Explorer的早期版本)对CSS的实现存在差异,导致开发者需要采取...

    各浏览器CSS hack兼容表

    各浏览器CSS hack兼容表各浏览器CSS hack兼容表

    css hack浏览器兼容性

    css hack ie6 ie7 ie8 firefox等浏览器兼容性

    CSS hack 兼容标识.rar_CSS hack 兼容标识

    在网页设计领域,CSS(Cascading Style Sheets)是用于控制网页布局和样式的语言。然而,由于历史原因,不同的...通过合理地使用CSS Hack,并结合现代前端开发实践,我们可以创建出既美观又具有良好兼容性的网页。

    CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar

    这份名为“CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar”的压缩包,提供了针对这些浏览器的CSS Hack解决方案,以确保在不同环境下页面的正常显示。 CSS Hack通常指的是利用浏览器解析CSS的bug或者特性,...

    CSS hack汇总

    ### CSS Hack 汇总:解决 IE6,IE7,IE8 及 Firefox 的兼容性问题 在网页设计与开发领域,确保不同浏览器间的代码兼容性是一项挑战性的任务,尤其是在处理像 Internet Explorer 6(IE6)、IE7、IE8 和 Firefox 这些...

    10个非常有用的CSS hack和技术

    ### 10个非常有用的CSS Hack和技术 #### 1. 跨浏览器的inline-block **技术要点:** 在CSS中,`inline-block`是一个非常有用的显示模式,它允许元素像行内元素一样显示,同时拥有块级元素的特性,如宽度、高度等。...

    cssHack样式解析

    CSS Hack 样式解析 CSS Hack 是一种解决不同浏览器中 CSS 解析差异的技术。由于不同的浏览器对 CSS 的解析认识不同,会导致生成的页面效果不同。因此,我们需要针对不同的浏览器写不同的 CSS,让它能够同时兼容不同...

    CSS hack-CSS

    本教程将详细介绍如何使用CSS Hack来区分IE6、IE7和Firefox。 1. 区分IE6与Firefox: 在CSS中,可以使用星号(*)前缀作为hack,这在IE6中被识别,而Firefox则无法识别。例如: ```css background: orange; /* ...

Global site tag (gtag.js) - Google Analytics