CSS HACK:浏览器兼容的一些写法
CSS HACK:浏览器兼容的一些写法
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容,CSS HACK自然而然地被我们想起。今天,我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事,需要我们有统一的规范来进行Coding,以方便维护。而解决兼容的方法就是(必须是,因为这才最容易有问题的)其中一个最重要的、要解决的规范之一。
在解决兼容方法上,想定出一个统一的规范,个人认为应该以下面3点为基本原则:
权衡成本:在浏览器被淘汰后,如何快速清理掉无用代码
可维护:在资源成本和完美间平衡的向后兼容
可读:省力、易记
这里把成本放在了第一位,并不是说我们不愿意追求完美,而只是,太刻意追求完美有时候可能会阻碍我们前进;在成本后,应该是可维护和可读,这点对于团队的合作来说至关重要,而最终结果也是为了减少成本。
先把这三个原则存起来,来看看我们平时解决兼容的写法(后面会附详细的Hack方法列表):
一、CSS 选择器 Hack
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body .sofish{display:block;}}
这种写法的优缺点是:
优点:全面,各种HACK都有;清理无用代码里易认
缺点:选择器名称不易记;代码量多(要重复写选择器)
二、CSS 属性 Hack
.sofish{
padding:10px;
padding:9px\9; /* all ie */
padding:8px\0; /* ie8-9 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */
}
这种写法的优缺点是:
优点:易记,代码少
缺点:不全面
三、IE 注释
<!--[if IE]>IE only<![endif]-->
<!--[if !IE]>NOT IE<![endif]-->
这种写法的优缺点是:
优点:安全;向后兼容好;易维护
缺点:用不好会增加HTTP请求;用得好代码又多
四、浏览器探测:JS/后端程序判断
// 以
相关文档:
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢?
1、IE无法调整那些使用px作为单位的字体大小;
2、国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3、Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel),相对长度 ......
应用样式的方法有三种:外部(external)、内部(internal)和内联(inline)。其中前两者的基本格式为:
selector { property : value; }
CSS中可以使用不同的selector(选择符)来应用样 ......
由于各浏览器的默认CSS样式不一样,我们必须写一个CSS Reset统一起来。
通常我的做法是在common.css里写全局控制,这里面也包括header和footer,其它CSS文件就通过@import url(”common.css”);引用。
body{padding:10px;margin:0;background:#fff;font-size:12px;line-height:14px;color:#333;font-family:Ari ......
像上面的一张图片我们该怎么用js 和css + div 很好的应用到我们的项目中呢?
<style>
.InpuRight{
height:20px;background:url(img/msg_bg.png) no-repeat;background-position:0px -250px;
}
.InputError{
width:20px;height:20px;background:url(img/msg_bg.png) no-repeat 0px 0px;
}
.inputLogin{
wid ......
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
所有浏览器 通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7、FF 共用
height ......