跨访问器开发设计工作经验总结(2) CSS

2021-03-13 01:37 jianzhan
CSS类级別的hack仅IE7鉴别 *+html {…}

IE6及IE6下列鉴别 * html {…}

opera、safari、chrome鉴别:

@media all and (min-width: 0px){…} //Firefox3.0.6不鉴别,但Firefox3.6也鉴别该标准,假如Firefox版本号有严苛规定,请应用下1条标准

@media screen and (-webkit-min-device-pixel-ratio:0){…} //IE、Firefox不鉴别该标准

仅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: ⑴0px;' for IE7/Firefox/Opera/Safari/Chrome , 'margin-top: 5px;' for IE8 **/

.news_list01 h2 span{float: right; margin-top: 5px; *margin-top: ⑴0px; 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实际效果是1样的,当电脑鼠标挪动至该元素时展现手的样子。可是应当尽可能应用cursor:pointer而非cursor:hand,由于cursor:hand仅有IE鉴别,而cursor:pointer才是CSS2.0的规范特性,IE以外的访问器也适用。
对话框翻转条显示信息难题
在应用弹出对话框或框对话框架的情况下,有时会有过剩的翻转条出現,这时候必须从好几个层面开展确定:
弹出对话框时window.open方式主要参数中设定的窗款式是不是界定了scroll=yes
架构标识的特性中是不是设定了scrolling=“yes”
对话框或架构内网页页面的CSS中,是不是对html或body的overflow开展了款式界定,假如沒有请参照以下编码。

拷贝编码
编码以下:

html {
margin: 0;
padding: 0;
overflow-x:hidden;
overflow-y:hidden;
}

line-height 特性
line-height行高指的是文字行的基准线间的间距,即字体样式最底端与字体样式內部顶端之间的间距。以下图所示:
文字之间的空白间距(行距)不仅是行高决策的,另外也受字号的危害。有时侯同1行内的不一样元素底边沒有对齐,有将会便是行高不统1导致的,这时候关调剂高宽比和对齐方法是不足的,还必须调剂line-height特性。
display:inline-block
display 特性有3个值:block,inline,inline-block。在其中display:block便是将元素显示信息为块级元素;display:inline便是将元素显示信息为行内元素;display:inline-block将目标呈递为内联目标,可是目标的內容做为块目标呈递。周围的内联目标会被呈递在同1行内。
l block元素的特性是:一直在新行上刚开始;高宽比,行高和顶和底边距都可以操纵;宽度缺省是它的器皿的100%,除非设置1个宽度。<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的事例, display特性默认设置值为block。

l inline元素的特性是: 和别的元素都在1行上;高,行高及顶和底边距不能更改;宽度便是它的文本或照片的宽度,不能更改。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的事例, display特性默认设置值为inline。

l inline-block的元素特性:展现为内联目标,4周元素维持在同1行,但能够设定宽度和高宽比地块元素的特性,现阶段IE8、Firefox3、Opera、Safari都可以以适用该特性了。
div中的文本全自动换行难题
现阶段操纵换行是应用下列CSS:

拷贝编码
编码以下:

div.content {
word-wrap:break-word;
overflow:hidden;
}

在 IE 、Firefox、Safari、Chrome下沒有任何难题,可是在 Opera下,长串英文会被遮挡住超过的內容。假如要想让长串英文本符也全自动换行,还必须设定word-break:break-all; (可是,此方法会致使一般的英文句子中的单词会被断掉,ie下也是)。英文单词在排版标准上不可该被断掉,长串英文本符实际上便是1个较为长的单词,当然也不必须断掉换行显示信息了,因此1般不必须附加设定word-break:break-all; 。

textarea中的文本全自动换行难题
在textarea中设定键入內容的全自动换行,也是在CSS中设定word-wrap:break-word;特性。必须附加留意的是textarea元素自身有1个warp特性,其赋值含意以下:

off:不全自动换行;
hard:全自动硬回车换行,换行标识1同被传输到服务器端(Opera、Chrome下不传);
soft:全自动软回车换行,换行标识不容易传输到服务器端。