《阿勇java
建站教程》1.5.1-css兼容
1.5.1-css兼容
感谢你阅读这篇文章,希望你继续阅读《阿勇java建站教程》的其他文章!
上节内容(《1.5-css样式使用》)说的是css样式的基本使用,并无高深的内容,一切应用都应该在实践中体现,将来的实战部分将继续丰富!本节的内容说的还是css样式的使用,并且是个比较棘手的问题——css样式和浏览器的兼容!
css hack 这个词是我在建站的时候接触到的。坦白说,从
培训以来,对各浏览器对样式兼容不统一的情况并没有引起重视。但也就是这个问题,对网站的推广,用户体验带来不必要的阻碍!
如今网页浏览器层出不穷,除IE,谷歌,火狐,opera几大实力巨作之外,国人的
360浏览器,
搜狗浏览器,qq,百度,猎豹等都来抢占市场!知名的、不知名的都企图分一杯羹!但是,毫无疑问的老大仍然是
IE浏览器!IE浏览器的市场占有量在国内位居第一,经过了好几代的升级,IE浏览器却给网站开发带来麻烦!为了使自己的网站能在短期内推广开来,提升知名度,我们不得不照顾一下IE用户群,由于各浏览器
解析css的能力和标准不同,很多时候同样的css样式在不同的浏览器下显示不同的结果!下面看一个
例子:
#test
{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/
}
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
不难看出,各大浏览器对background-color的样式加载不尽相同!为了让我们的网站能顺利的在各浏览器里顺利解析,显示预期效果,我们不得不给原本简易的css样式文件添加兼容代码,也就是css hack。同时,网上也有为兼容css开发出来的js库,为了兼容各浏览器,流行的js库也纷纷添加兼容性代码,从一定程度也节省里开发者的工作!为了能做出更美观,兼容行强的网页,需要不断地实践,
积累经验,不断的学习!
在下节内容中,我将带领大家学习js的基本使用!
结合js,能做出生动活泼的网页内容,同时也能为数据交互提供支持!尽请期待!
本文原创写的不好的地方欢迎大家与我一起交流(微信号:zhyy22145),转载请注明出处!-《阿勇java建站教程》1.5.1-css兼容
http://www.ya178.com/public/detailUA-10770-1.html
《阿勇java建站教程》统一交流团:http://www.ya178.com/public/detailUU-39-1.html