在IE主流时代诗意地编码（二）

重置（浏览器默认属性）

如你所知，所以的浏览器对各种html元素都具有不同的默认属性。这是为什么使用重置样式文件（Reset style sheet）是一个明智选择，这样我们就可以在“一张白纸”（去掉了众多浏览器默认属性，可以让你自己的属性更好的工作）上面开始工作了。

众多充斥互联网的重置样式文件各有优劣。Eric Meyer的重置文件被广泛的认为标准并被经常使用，还有其他一些演化的版本。(如果不能看到这个页面，可以直接下载这个文件css-reset.txt)

随着HTML5的出现，在CSS重置文件（Reset style sheet）中包含新HTML元素也是个好主意。html5doctor为Eric的重置文件提供了一个很好的升级版本，你可以在你的项目里面免费使用它。

在使用CSS reset的时候，既可以嵌入你自己的CSS文件头部也可以从外部引入——如果你有代码洁癖：

@import url(reset.css);

不同的CSS可能破坏你的布局

如果你觉得使用Universal IE6 CSS，你刚省去了很多头疼的事情。但是不要被IE7、8那个鲜亮的logo迷惑了你：如果你打算用最新的CSS技术，还要为它们做很多事情。

IE6 和PNG支持

大家都知道IE6不能正确显示alpha通道透明PNG图片（也就是那个好看的i.e. the good-looking ones——我又囧了），看到过精心制作的logo出现那个讨厌的淡蓝色背景。

你可以在一些为了是IE6显示PNG而做的变通方法中做个选择。每个方法都相当容易实施，并且在整体设计中做到不相同？（这句不知道怎么翻，大大们帮忙下——Each is fairly quick to implement and does make a difference in the overall design.）

这里是一些解决这个问题的优秀脚步和技术：

DD_belatedPNG

Supersleight jQuery Plugin

PNG 8-bit technique (Fireworks)

Clever PNG Optimization Techniques

PNG Optimization Guide: More Clever Techniques

值得注意的是当前越来越多的网页设计选择不去为IE6解决PNG问题：

最新改版的31three没有用任何方法为IE6解决PNG问题

高级选择符

这些选择符几乎是他们自己开发的最优雅的CSS，因为他们才拥有CSS真正的力量——可以使得作为开发者的我们，人生变的更简单（我们的预算也会显著降低！）。

是否决定让它们在IE工作，主要取决于我们在哪里用到它们。

比如，如果利用它们来添加更多的细节到设计中，像代表文件类型的精致图标，如果有些浏览器不显示他们不会带来很大的区别。站点的访客不会知道他们错过了什么，链接任然完整可用。

这些选择符也被广泛的运用到提升排版细节，缺少对它们的支持不会给你的设计带来很大的问题。

Hicksdesign在导航菜单的项目号码里面使用了高级选择符，对IE6用户而言它们是不可见的

哪些浏览器不支持这个？实际上IE6看不到样式文件提交的任何高级选择符。它仅能理解简单的父子层级的类（classes）和ID选择符。多个类提交到同一个元素（HTML标签）甚至会冲突！不能信任IE6。

IE7忽略 :lang 选择符和伪元素（pseudo-elements），比如 :first-line ，:first-letter， :before，还有 :after 。但是可以理解所以的属性选择符。

另外，迄今为止发布的所有IE（作为译者的我：就是IE8和IE8-）版本都不支持伪类 :target ，UI元素声明伪类（:enabled， :disabled，等），结构伪类（像 :nth-child :nth-of-type还有 :first-child）或者负伪元素。

盒模型规则

盒规则允许为一个元素设置任何需要的宽和高（盒规则允许你告诉你浏览器你期望的元素宽和高）。

比如，可以设置 box-sizing 属性为 border-box，这时设置的宽度和高度将会减去内边距（padding）和边宽（border），而不是加上它们（上面所述是W3C的标准盒模型-standard box model说明）。

这样使控制元素大小变的容易，同时使得垮浏览器大小表现一致。

如果确信站点在IE里以缺陷的盒模型渲染（quirks mode）（以不标准的盒模型渲染-and therefore renders with the non-standard box model），你或许想在样式表里用这个属性使得所有的浏览器统一。

确保添加标准属性和浏览器专有属性：

div {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

哪些浏览器不支持这个东东？如果站点在怪异模型（quirks mode）渲染，IE6将会用不标准的盒模型渲染，所以就算有 border-box的属性也会被渲染。可以强制IE6以怪异模型渲染（译者觉得这里应该是标准模型吧？）。有一些可选的方法，其中一个是在HTML页面doctype声明前添加HTML 注释。（译者很难过的：这一段好悲剧，没看懂或许作者没说清，这个强制的办法到底怎么做到呢。以下是英文原作Which browsers don’t support this? If the website is rendered in quirks mode, IE6 will render using the non-standard box model, so it will already be rendering as if it had the “border-box” property on. You can force IE6 to render in quirks mode. There are a few ways of doing this; one way is by adding an HTML comment before the doctype declaration of your HTML pages.）