iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >CSS hack怎么区别不同浏览器
  • 859
分享到

CSS hack怎么区别不同浏览器

2024-04-02 19:04:59 859人浏览 安东尼
摘要

这篇文章主要介绍“CSS hack怎么区别不同浏览器”,在日常操作中,相信很多人在CSS hack怎么区别不同浏览器问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS ha

这篇文章主要介绍“CSS hack怎么区别不同浏览器”,在日常操作中,相信很多人在CSS hack怎么区别不同浏览器问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS hack怎么区别不同浏览器”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

我们在开发DIV+CSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6、微软IE7、微软IE8、火狐浏览器、谷歌浏览器有一些不同,如宽度、高度等地方有相差误。

IE6比较老的版本浏览器,用户比较多,
IE7较新浏览器,更接近标准浏览器,
IE8算是微软标准浏览器,但差别于浏览器,
火狐(Mozilla, Firefox)和谷歌浏览器(chrome)是比较标准的IE浏览器,一般我们以这个浏览器为开发参考平台,同时IE8与这两个浏览器解释CSS比较接近,一般只要通过火狐、谷歌浏览器测试兼容,一般就能确定IE8.

因此一般我们区别这些浏览器CSS hack的方法就变得简单,我们只需考虑IE6\IE7\火狐(Firefox)这3个浏览器即可兼容全部浏览器。
具体区别如下:
区别IE6与FF:
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;

注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;以下是各浏览器CSS hack表格

IE6

IE7

FF

*

√

√

×

!important

×

√

√

undefined

另外再补充一个,下划线"_",
IE6支持下划线,IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6,IE7,firefox: background:orange;*background:green;_background:blue;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

以上是介绍区别各浏览器的CSS hack的写法,下面我们简单介绍这些CSS hack用法:

要求说明:假如我们设置一个类名为exple的类CSS属性,CSS样式边框为1PX黑色边框,高度为100PX并要求,在IE6浏览器下宽度为100PX;IE7浏览器宽度下为150PX;火狐IE8谷歌浏览器下宽度为200PX;(PX是长度单位像素)

则CSS代码如下:
.exple{border:1px solid #000; height:100px;width:200px; *width:150px !important; *width200px;}
这样只要在html设置一个div的类(class="exple"),这样这部分在火狐、IE8、谷歌浏览器下就会显示宽度为200px高度为100px带1px的黑边框的方块;IE7浏览器宽度下为150PX高度为100px带1px的黑边框的方块;在IE6浏览器下就会显示出长度和宽度为100px的带1px黑边的正方形。

到此,关于“CSS hack怎么区别不同浏览器”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: CSS hack怎么区别不同浏览器

本文链接: https://www.lsjlt.com/news/92712.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作