html标签起什么作用,我就不多说了,大家在清楚不过了。不过我要说的是,很多开发人员都不怎么设置html标签的样式,但html标签其实又是一个重点之一,所以我建议在你的项目中考虑在html标签中设置下面的样式:
html { font-size: 100%; /*==用来防止IE和Opera浏览器下的Bug==*/ overflow-x: hidden;/*==隐藏水平滚动条==*/ overflow-y:scroll;/*==保证所有浏览器下都显示垂直滚动条,防止没有滚动条的页面有移动效果==*/ -webkit-tap-highlight-color: transparent;/*==Add vertical scrollbar Keeps page centered in all browsers regardless of content height==*/ /*==Define maximum text display as 100% to document Corrects text displayed oddly after orientation change in handheld browsers ==*/ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%;/*==在IE下body的百分高度需要在html设置此值==*/ }这个CSS片段具体解释大家可以参考注释部分,其亮点之处是用来控制浏览器的滚动条,特别是垂直方向的滚动条,在我们平时的Web页面制作中时常碰到当一个页面不够一屏显示时会出显页面移效果,欲解决这个问题,看上面的代码。另外一个就是Webkit内核浏览器中Google Chrome不支持12px以下的字体,此处我们一起解决。或许这个技巧大家已经运用到项目中来了:)。
二、::selection
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection{ background: #fe57a1; color: #fff; text-shadow: none; }这个技巧很有特色,它可以帮你改变你选择中元素的文本的高亮背景和前景色,让你的网站具有一个独一无二高亮色,上面代码中的颜色值可以设置成你自己喜欢的色值。不过这种方法只适合现代浏览器,在IE6-8下是没有效果的,具体原因不用我在说了。
三、img -ms-interpolation-mode: bicubic;
图片的缩放在IE7以及IE6下是件很恐怖的事情,将严重影响您的图片质量,欲解决,记得在img标签上加上下面的代码:
img { -ms-interpolation-mode: bicubic; }四、显示隐藏元素
在Web中时常用到图片代替文字,特别在logo用图片来代替。换句话说就是:视觉隐藏的文字,同时还允许屏幕阅读器读取它,是非常重要的。问题是,我已经看到了很多种不同的方法实现方法,这样做的,很难知道哪一种方式比另一种更好。 HTML5的样板的建议是:
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }五、svg:not(:root)
IE9有一个最大的亮点,就是支持SVG。当然使用时大家要注意一个是:
svg:not(:root){overflow:hidden;}六、@media print img max-width
即使你不希望使用任何screen的媒体特性,但是Paul Irish的HTML5 Boilerplate的打印样式还是值得大家学习和借鉴的,我想大家和我一样,当在设置打印样式时常不会考虑图片的样式,最起码我自己是没有考虑到的:
@media print { img { max-width: 100% !important; } }上面代码确保你的图片不会溢出你的容器设置。
七、@media print widows
在屏幕和纸上window内容是好难看的,神奇的是只需要在段落和标题标签上这样设置就解决了
@media print { p, h2, h3 { orphans: 3; widows: 3; } }