仓酷云

标题: 来一发10个十分有效可是IE扫瞄器不克不及利用的CSS属性 [打印本页]
作者: 飘灵儿    时间: 2015-1-15 23:56
标题: 来一发10个十分有效可是IE扫瞄器不克不及利用的CSS属性
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
网页制造poluoluo文章简介：，这10个属性中，有我们经常使用的，更有我们不经常使用却十分有效的――CSS学无尽头。
只管我们对CSS已十分熟习，对付一样平常的事情或在各个扫瞄器中弄定CSS的兼容性已很轻车熟路，可是并非一切的CSS属性都是那末的经常使用。在本文中，让我们看看10个大概十分有效可是在活该的IE扫瞄器中(次要是IE6和IE7)却不克不及利用的CSS属性。看完了该文，你大概会加倍厌恶IE扫瞄器吧。

(请注重，本文宣布时髦未测试这些属性在IE8中的体现。我稍后会做一个测试页面，用来测试这些属性在以是IE扫瞄器中的体现。)
1.Outline

在调试CSS成绩的时分，我经常在指定元素上增加border来准确的检察该元素会产生甚么并匡助断定成绩的来历。这经常是无效的，由于它能够在结构上给我加倍详细的可视性。可是假如是块级元素，这大概会产生某些毛病——在任何块级元素上增加1px的边框极可能会影响到结构，它会让这个元素的宽度分外增添2px。
outline属性是完善的替换者，由于它能够在不影响文档流的情形下出现该工具。可是IE6和IE7不撑持outline属性，以是，它不克不及在这两个扫瞄器顶用于调试。
2.Inherit(值)

在CSS开辟中有良多如许的例子：经由过程在特定元素上设置某些款式来告知该元从来“承继”它父级元素的一切已增加的属性，如许你就能够制止相称多的键盘输出。
这能够经由过程设置inherit来很简单的完成。这大概很有效。好比，当重写background属性的时分，经常会有良多的笔墨在该属性中(色采、图片的URL地点、地位等)。以是，与其从头写这些值，你大概仅仅想要思索中的元素和其父级元素有不异的背景属性，一个inherit值就能够弄定统统——这明显年夜年夜的节俭了键盘输出。
不幸的是，inherit值在IE6和IE7不被撑持（除用于direction(笔墨偏向)和visibility属性）。
或人说，代码就像女人的裙子——越短越好，看来IE会拦阻我们这个希望的完成。
3.Empty-Cells

该属性只用于table大概”display”属性被设置为”table-cell”的元素。假如你静态的为一个table增加内容，便可能会碰到某个单位格的内容为空的情形，然后你又不但愿这个空的单位格的边框、背景致、背景图片等埋没失落。
利用”empty-cells:hide”就可以办理这个成绩，它会将大概呈现这类情形的单位格完整埋没失落。
InternetExplorer不撑持empty-cells属性。
4.Caption-Side

说到table的属性，这个属性用于声分明示在表格的侧栏的表格题目。它承受top、bottom、left和right四个值。InternetExporer不撑持这个属性，table的题目在IE6和IE7中将老是呈现在表格的顶部。
5.Counter-Increment/Counter-Reset

有序列表(<ol>)十分便利，由于它能够省往你手工增加递增数字的贫苦，并且它同意你不必变动数字就可以改动列表的序列。
CSS具有counter-increment和counter-reset属性，它同意你用来主动天生递增数字到几近一切的HTML元素上，就像有序列表的效果一样。
这里有个示例：
  1. 12
复制代码
  1. h2{counter-increment:headers;}h2:before{content:counter(headers)".";}
复制代码
下面的款式将在一切的<h2>标签后面主动增加递增的数字，并且同意你在h2标签上完成和li标签一样的的效果。
可是IE6,IE7乃至Safari(直到3.x版本)还不撑持这些属性。固然，IE6也不撑持:before伪元素。
6.Min-Height

偶然，一个网站的计划或结构布局必要一个有流动高度的内容地区，不然特定的视觉效果就会丢失落。这大概会由于一个突变背景、一个共同的下拉列表、大概多是由于PS出来的很酷的发光效果。可是有的时分，页面中的内容会对照多，而页面却不克不及像预期那样睁开。
这个时分就必要用到min-height属性了，由于它能够告知扫瞄器在一个特定的块级元素上衬着最小的高度，不论内容的实践高度是不是到达了这个最小高度。然后呢，假如内容超越了最小高度，该元素就会过度的扩大开。
利用min-height独一必要注重到的是它在IE6中不被撑持。我们都晓得IE6在（迟缓的）加入汗青舞台，可是有的客户大概仍旧请求他们的网站撑持这个活该的扫瞄器。
不外使人乐意的是，IE6衬着height的值的办法恰好和别的扫瞄器衬着“min-height”的体例一样，以是你只必要一个针对IE6的hack或自力的款式表来为该元素增加特定的height，这个成绩就办理了。
IE6一样忽视min-width、max-height和max-width，可是上述办法在这些属性上也是可行的。
7.:hover

从手艺下去说，:hover只是一个伪类，可是它在IE6中不被撑持（IE7和IE8撑持）。:hover伪类同意你在元素上增加任何的鼠标经由款式。这十分有效，能够制止(最少在某种水平上)利用JavaScript。
可是假如你的网站，必要完整撑持IE6，出格是在中国这类IE6一手遮天的情形下，那末你就必需思索作废利用这个伪类，除非相干的标签有个”hred”属性，好比<a>标签。并且假如要完成这类效果，大概必需借助于javascript和分外的款式。
8.Display

Display一般被设置为这三个值中的一个：block、inline和none。“得益于”IE，Display的别的值很少被用到。这些值包含inline-block、table、inline-table和table-cell等，这些属性关于办理一些特别的结构成绩时，是很有效的。
以是，只管IE的确撑持Display的这三个基础属性，可是它基础上不撑持别的属性。
实在，IE8对display的属性撑持已相称完全了。不外，关于inline-block属性，IE6/7只撑持自己为inline的元素。
想懂得更多关于Display在各个扫瞄器中的撑持情形，请查阅这里——神飞注
9.Clip

这是一个在特别情形下能派上用处的很风趣的CSS属性。它大概和不成预知的、静态天生的内容分离起来。复杂来讲，这个属性同意你在一个特定的元素上指定埋没地区——也能够了解为，在一个相对定位的元素中，依照必定的设置来裁剪该元素的显现地区，超越该地区的内容会被埋没失落。语法看起来像如许的：
  1. 1234567
复制代码
  1. div.clipped{padding:20px;width:400px;height:400px;clip:rect(20px,300px,200px,100px);position:absolute;}
复制代码
修剪只能用于一个相对定位的元素，并且只用利用矩形地区。括号内的数字划出的地区(200px*180px巨细)为可见地区，该地区之外的内容不成见大概被剪切失落。
手艺下去讲，clip属性被IE撑持，可是只撑持无逗号的语法，好比
  1. 1234567
复制代码
  1. div.clipped{padding:20px;width:400px;height:400px;clip:rect(20px300px200px100px);position:absolute;}
复制代码
下面的款式（rect前面括号里的属性没有效逗号离隔）在年夜多半扫瞄器下都可运转，可是大概不会经由过程CSS考证，由于语句没有效逗号离隔。
10.:focus

这是别的一个伪类必要在这里被说起的，由于一切的非IE扫瞄器，都撑持这个属性。:focus伪类同意你声明一个出格的款式，当一个页面元素成为键盘(鼠标)核心的时分，将该款式静态的使用到该元素上。这在表单位素上十分有效，由于你能够在一个输出框被选中的时分给它增加一个边框。
上面的款式将在输出框成为键盘核心的时分增加一个白色的边框：
  1. 123
复制代码
  1. input:focus{border:1pxsolid#f00;}
复制代码
这就是本文的全体了，翻译完成以后，神飞也受益不浅，这10个属性中，有我们经常使用的，更有我们不经常使用却十分有效的——CSS学无尽头。

不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。
作者: 仓酷云    时间: 2015-1-17 23:50
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
作者: 柔情似水    时间: 2015-1-25 17:26
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）
作者: 谁可相欹    时间: 2015-2-3 12:29
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
作者: 乐观    时间: 2015-2-9 01:34
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
作者: 变相怪杰    时间: 2015-2-26 17:48
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
作者: 爱飞    时间: 2015-3-8 16:40
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
作者: 简单生活    时间: 2015-3-16 07:54
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
作者: 兰色精灵    时间: 2015-3-22 21:40
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2