web前端技术(web前端兴趣翻译小组).docxVIP

10 ways to make Internet Explorer act like a modern browser-10种让IE像现代浏览器那样跑的方法 像许多Web开发者一样，我痛恨IE，尤其是其版本IE6。在如同HTML5和CSS3这样强大的新技术正兴起的时候，IE不能应付这些技术并不让人意外。幸运的是，有些小窍门可以让你轻松一些。Enable HTML5 on IE-让IE支持HTML5特性听说过HTML5吗？如果你有兴趣做Web开发，回答应该没有悬念。对于还不了解的人，HTML5是下一重要版本的HTM; World Wide Web的核心标记语言。大多数现代浏览器已经可以支持运用新的HTML5优势特性，至少支持部分新特性。可是，IE如同它并不以其创新触觉而闻名，会对这些标记视而不见。这个html5.js是一个非常有趣的项目，其目标是让IE兼容HTML5。你只需要将html5.js脚本放到你的html文件头部分即可。你也可以用热链接，下面是个示例： Source : /2009/01/07/html5-enabling-script/Use the text-shadow CSS property on IE-在IE上使用css文字阴影的效果由于火狐3.5最近实现了对css文字阴影效果的支持，设计师已开始大量地使用它。今天，大多数现代的浏览器都能够很好地渲染这个效果。不过，IE再一次忽视了这个效果。令人欣慰的是，IE独有的滤镜特性，能够很好地模拟文字阴影效果。上面的例子说明了，怎么在现代浏览器上应用文字阴影这个效果，以及IE上使用滤镜。请注意，由于滤镜不是一个标准的css属性，因此它应该使用条件注释标记出来。如果你想学习更多css文字阴影效果，不要忘了看看我们的 资源列表(/blog/10-resources-to-get-the-most-out-of-the-css-text-shadow-property) 以便获得对文字阴影特效的最全面掌握。p.shadowed text-shadow: #0000ff 0px 0px 3px; /* Modern browsers */filter: glow(color=#0000ff,strength=3); /* IE */ Source : http:/www.howtocreate.co.uk/textshadow.htmlCSS box-shadow on IE-在IE中的CSS3 块阴影效果在我看来，区块阴影是CSS3最厉害的性能之一了。因为这项技术可以使大家在任何HTML文本上进行图片设置，而且还不必使用任何图案。这对于设计人员和Web前端开发人员来说都是一个里程碑式的发展。.shadowedbox-shadow: 10px 10px 5px #888;但是就不要再疑问 IE浏览器是不是能兼容块阴影了，我可以很肯定的告诉你，它不能。为了效仿CSS的区块阴影效果，我们就得使用滤镜了，方法如下：.shadowed filter:progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1); Source : /2009/08/using-css3-box-shadow-with-ie.htmlRounded corners!-圆角圆角，它们在web2.0中从外观和感觉来说都是如此受欢迎。css3特地用一个名为border-radius的属性解释它，可以不需要任何图片就能轻松设计出圆角。对于不了解它的人，我们这里告诉你如何使用它：.roundborder-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;幸运的是，有好几种方法可以在ie环境下创建不需要图片的圆角，我最钟爱的是一小段叫DD roundies的javascript代码，它能给任何html元素添加圆角下面是给任意一个类名为 roundify的html元素添加圆角的例子:DD_roundies.addRule(.roundify, 10px); Source : /experiment/DD_roundies/Multi column layouts-多列布局CSS3中允许你自动显示一些列的内容。这是一个伟大的事情，它让设计师有了更多空间去设计很炫的布局，这非常棒。下面的CSS工作在Firefox和Safari。它会自动添加列到一个div元素。.column -moz-column-width: 13em;-webkit-column-width: 13em;-moz-column-gap: 1em;-webkit-column-gap: 1em;不幸的是，它没有办法做一些类似的Internet Explorer上的效果。但jQuery及其columnize插件可以帮助它！以下示例显示了使用jQuery和columnize来创建列是多么容易：$(#mydiv).columnize();$(#myotherdiv).columnize( width: 200 );$(#mythirddiv).columnize( columns: 2 ); Source : /2008/07/22/multi-column-layout-with-css-and-jquery/CSS3 pseudo-selector emulation-CSS3 伪选择器模拟CSS3引入了很多非常有用的选择器，在所有选择器中，这个:nth-child()伪类代表了一种文档树的某个元素，如下所示：p:nth-child(3) color:#069;正如你所料，这些事情对IE来说太超前了。为了克服这些问题，Keith Clark编写了一个非常有用的脚本叫做ie-css3.js.使用这个脚本很简单的：下载Robert Nyman的DOMAssistant(/)，Keiths的ie-css3.js(ie-css3.js的下载地址：/)，然后在你的html文件顶部引用，并把他们关连起来。 Source : http:/www.keithclark.co.uk/labs/ie-css3/Opacity-透明度透明度是CSS3中的另一个特效，但是在IE浏览器中还无法呈现。这是很遗憾的，因为被允许进行交互的一个特定元素的不透明度是非常有趣的网页设计。再一次的，这种蹩脚的过滤器属性可以帮助我们在IE浏览器上达到一个比较满意的结果。下面的一个例子就是说明了如何使用滤镜来实现一个元素的透明。.elementopacity:.7; /* Standard CSS */filter:alpha(opacity=70); /* IE patch */Rotating HTML elements-旋转HTML元素在css3中使用变换属性，可以旋转元素。transform: rotate(240deg);-webkit-transform: rotate(240deg);-moz-transform: rotate(240deg);Interner Explorer会简单的忽略所有上述的3种声明。但是，IE用户用filter这个属性，不是吗，当然，这个并不是W3C的有效的属性，但是由于它是IE浏览器，那么你就不要问那么多了。下面的代码将模仿转换所有版本的IE浏览器：filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540); Source : /en-us/library/ms533014%28VS.85%29.aspxRGBa support-对RGBa的支持在RGBa里a表示的是alpha。这个新功能允许开发者设置颜色和透明度，在网页制作中这是一个比较实用的功能!.color-block width: 50%;background-color: rgba(0, 0, 255, 0.2); /* Modern browsers */和以往ie缺乏创新一样，较其他浏览器不支持RGBa。幸运的是，通过滤镜可以实现RGBa类似的效果：.color-block background:transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000050,endColorstr=#99000050);zoom: 1; Source : /rgba-browser-support/IE compliant font embedding-IE兼容字体嵌入在过去的15年里，网页被很少的几种字体主导，例如：Arial, Verdana, Courier， Times New Roman。这些字体标志着网页“安全”，因为几乎所有的电脑都安装了这些字体。（但是他们没有被安装在 GNU和Linux中，因为他们不是免费的。）但是在最近几年，字体嵌入成为了一项非常有趣且让人喜欢的技术：这种技术允许你在设计中嵌入特殊的字体，并且你的用户也能看见，而不必担心他们是否安装这些字体。在这些字体嵌入放入技术中，font-face可能是最简洁的一种。IE从IE4就开始支持字体嵌入，这是一件很棒的事。由于微软的浏览器不能像其他的浏览器一样工作微软有自己的字体专有EOT格式，为了把字体嵌入你的网页，你必须使用不同的声明，就像下面的一样.注意如果你需要把一种字体转换为微软的eof格式，你可以使用这个在线免费工具(/wizards/ttf2eot.cgi)font-face font-family: your FontName ;src: url( /location/of/font/FontFileName.eot ); /* IE */src: local( real FontName )