常见的浏览器Hack技巧整理
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要介绍了常见的浏览器Hack技巧整理的相关资料,需要的朋友可以参考下
常见的浏览器Hack技巧整理
如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题。而浏览器兼容问题大部分也集中在对IE系列的兼容。这里就一下对IE系列的CSS Hack,记录一下,方便以后查阅。
IE Hack
IE系列浏览器的hack大略如下
- _nowamagic:1px;-----------ie6
- nowamagic:1px;-----------ie7
- nowamagic:1px\0;----------ie89
- nowamagic:1px\9\0;--------ie9
- :root nowamagic:1px; ----ie9(实际情况可能ie9还是有问题,再用这种方式)
这样就基本上就可以兼容所有IE。
其中粉红色部分为属性hack,黄色部分为选择器hack,它们可以结合使用。Firefox和Chrome也有它们专有的hack,详细hack方式及使用示例如下
Firefox 与 Chrome 的 Hack
Firefox
@-moz-document url-prefix() /写在选择器外层时(只可写在此处)Firefox only/
Chrome
@media screen and (-webkit-min-device-pixel-ratio:0) /写在选择器外层时(只可写在此处)Chrome only/
使用示例
@-moz-document url-prefix() /Firefox/ { body { background-color:pink; } }
浏览器对css的解析是从前到后的,并且采用一个样式声明。
CSS 实例
.color{ background-color: #CC00FF; /所有浏览器都会显示为紫色/ background-color: #FF0000\9; /IE6、IE7、IE8会显示红色/ background-color: #0066FF; /IE6、IE7会变为蓝色/ _background-color: #009933; /IE6会变为绿色/ }
background: red; / 对FF Opera和Safari有效 / #background: blue; / 对 IE6 和 IE7有效 / _background: green; / 只对IE6有效 / //background: orange;/ / 只对IE8有效 / !important /FF、IE7有效/ /IE都有效/
IE8是可以和IE7兼容的,简单一行代码,让IE8自动调用IE7的渲染模式。只需要在页面中加入如下HTTP meta-tag:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />,只要IE8读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。
混用起来大约是这样
:root .demo { background:#963\9; / 仅IE9适用 / } .demo { width: 300px; height: 200px; background: #036; / 所有浏览器都适用 / background: #09F\9; / IE6~IE9 / background: #09F\0; / IE8~IE9 / background: #09F\0/; / IE8 / background: #F60; / IE6/IE7 / +background: #F60; / IE6/IE7 / @background: #F60; / IE6/IE7 / >background: #F60; / IE6/IE7 / _background: #c; / IE6 / } @media all and (min-width:0) { .demo { background: #F06; / webkit and opera / } } @media screen and (-webkit-min-device-pixel-ratio:0){ .demo {background:#609;}/webkit (& Opera9.2)/ }
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程