跨浏览器开发经验总结(二) —— CSS
css hack的行使 CSS类级此外hack 仅IE7辨认 *+html {…} IE6及IE6以下辨认 * html {…} opera、safari、chrome辨认: @media all and (min-width: 0px){…} //Firefox3.0.6不辨认,但Firefox3.6也辨认该法则,假如Firefox版本有严酷要求,请行使下一条法则 @ 仅opera辨认: @ CSS属性级此外hack 仅IE辨认 : margin-left:10px9; 仅IE8辨认 : margin-left:10px ; 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之外的赏识器也支持。 窗口转动条表现题目 在行使弹出窗口可能框窗口架的时辰,偶然会有多余的转动条呈现,这时必要从多个方面举办确认:
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:自动软回车换行,换行标志不会传送随处事器端。 原文:http://www.cnblogs.com/joycel/archive/2010/05/07/1729390.html (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |