根据不同浏览器选择不同css

最新推荐文章于 2021-06-04 19:45:17 发布
最新推荐文章于 2021-06-04 19:45:17 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： CSS设计 Web前端页面设计与开发 文章标签： 浏览器 css firefox stylesheet ie function
如何根据浏览器选择不同css？比如我有3个CSS文件，如果客户端是IE6，则使用CSS1，如果客户端是IE7或者IE8,则用CSS2，如果客户端是FIREFOX，则使用CSS3。
从网上找了下，有如下说法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码</title> 
<link href="" rel="stylesheet" type="text/css" /> 
<script language="jscript"> 
if (window.navigator.userAgent.indexOf("MSIE")>=1) 
{ 
var IE1024="style1.css"; 
var IE800="style2.css"; 
var IE1152="css1.css"; 
var IEother="css1.css"; 
ScreenWidth(IE1024,IE800,IE1152,IEother) 
}else{ 
if (window.navigator.userAgent.indexOf("Firefox")>=1) 
{ 
//如果浏览器为Firefox 
var Firefox1024="style1"; 
var Firefox800="style2.css"; 
var Firefox1152="css1.css"; 
var Firefoxother="css1.css"; 
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) 
}else{ 
//如果浏览器为其他 
var Other1024="css1.css"; 
var Other800="css1.css"; 
var Other1152="css1.css"; 
var Otherother="css1.css"; 
ScreenWidth(Other1024,Other800,Other1152,Otherother) 
} 
} 
function ScreenWidth(CSS1,CSS2,CSS3,CSS4){ 
if ((screen.width == 1024) && (screen.height == 768)){ 
setActiveStyleSheet(CSS1); 
}else{ 
if ((screen.width == 800) && (screen.height == 600)){ 
setActiveStyleSheet(CSS2); 
}else{ 
if ((screen.width == 1152) && (screen.height == 864)){ 
setActiveStyleSheet(CSS3); 
}else{ 
setActiveStyleSheet(CSS4); 
}}} 
} 
function setActiveStyleSheet(title){document.getElementsByTagName("link")[0].href=""+title;} 
</script> 
</head> 
<body> 
</body> 
</html>
Serein
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
根据不同浏览器加载不同css文件
07-22
资源名称：根据不同浏览器加载不同css文件资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
10-31
### 知识点详解：根据判断浏览器类型及屏幕分辨率自动调用不同CSS的代码 在Web开发中，针对不同浏览器和不同的屏幕分辨率提供定制化的样式表（CSS）是一种提升用户体验的有效方式。本文将深入探讨如何通过...
如何让不同浏览器调用不同的CSS样式
weixin_34419326的博客
05-15 214
如何让不同浏览器调用不同的CSS样式 由 于对W3C标准支持程度的不同，往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭。以目前市场占有率最高的两个浏览器Microsoft Internet Explorer和Mozilla Firefox为例，前者对标准的支持明显不如后者，网页设计人员不得不花费大量的时间和精力来调整代码以保持网页在二者中呈现的一致性——这是件非常痛 苦的事情，顾此...
根据不同浏览器写不同css
winrh的博客
07-24 1912
最近几天帮朋友弄了个简单的生日页面放在我的github博客上，就有了不同浏览器可能发生界面的错乱，如何解决？ 当然，作为一个小白，我的思路是通过js判断浏览器类型，再用jquery变换相应的样式。事实证明是可以的。 参考https://blog.csdn.net/zlf_php/article/details/78959234 这里只是进行最简单的判别 例子： $(function()...
根据ie浏览器不同的类别选择不同的css
weixin_33859844的博客
09-06 81
如果是IE浏览器则选择all-ie-only.css <!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> 如果不是ie浏览器则选择not-ie.css <!--[if !IE]><!--&gt...
CSS条件注释详解（根据不同浏览器加载CSS）
01-19
由于浏览器版本的不同，对CSS里某些元素的解释也不一样，针对浏览器版本不同而选择不同CSS的代码，其实我们还可以利用条件注释的方法来达到类似的目的，什么是条件注释，在此简单介绍一下，无非就是一些if判断啦，...
CSS在不同浏览器中兼容问题
12-14
* 针对多种浏览器分别配置合适的 CSS 文件，再通过判断浏览器选择不同 CSS 实现兼容性 * 使用 <!--[endif]--> 等方法来区分不同浏览器 CSS 在不同浏览器中的兼容问题是一个复杂的问题，需要认真对待和解决。通过...
根据不同浏览器使用不同的css文件
weixin_33971977的博客
06-29 109
代码： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; ..
html不同浏览器条件,css怎么让不同浏览器兼容？
weixin_42187487的博客
06-04 508
世界上没有任何一个浏览器是一样的，同样的代码在不一样的浏览器上运行就存在兼容性问题。下面我们来看一下如何使css兼容不同浏览器。1、CSS HackCSS Hack就是针对不同的浏览器或不同版本浏览器写特定的CSS样式达到让浏览器兼容的过程。2、条件注释法IE条件注释(Conditional comments)是IE浏览器私有的代码，在其它浏览器中被视为注释。gt : greater than，选...
为不同的浏览器载入不同CSS的二种方法
Thinking的专栏
10-26 612
 由于各浏览器(IE、gecko、opera......)对CSS的渲染方式都有所不同，造成显示效果不同，所以可通过对其载入不同CSS的方法来解决，下面介绍下二种方法来实现，不一定很实用，难的玩一把。　　纯CSS方式　　.box{ background: #808080;　　}　　以下是引用片段：Code .box{ width: 20em; he
根据浏览器屏幕分辨率不同使用不同的css样式——响应式
az44yao的专栏
07-14 1842
有两种方法实现：1、用css的@media（原生写法）；2、利用bootstrap的网格系统。（个人推荐用第二种方法。） 一、使用纯css实现 语法：@media only screen and (判断属性) {css样式} 理解：判断属性有：1、(min-width: 1200px)——不小于1200px；2、(max-width: 1200px)——不大于1200px；3、(min-width: 800px) and (max-width: 1200px)——不小于800px且不大于1200px。
浏览器解析css选择器的规则
_陌默
06-06 5093
浏览器解析css选择器的规则是从右向左的，这样会提高查找选择器所对应的元素的效率。 中国人有一个习惯，不论干什么，潜意识中的顺序都是从左到右，从上到下，从大到下，因此大多数人看到这个顺序都会感到很不适应，但大家要记得我们这是一个程序，而程序是用来干什么的？运行。因此它的第一要领是必须效率高，因此所谓的习惯我们就先抛到九霄云外去。 至于具体分析如下（个人理解）： 1.html片段如下
在不同的浏览器使用不同的css样式,解决浏览器兼容问题
热门推荐
唐策的博客
01-11 1万+
让CSS区别不同浏览器 区别不同浏览器，CSS hack写法： 区别IE6与FF： background:orange;*background:blue; 区别IE6与IE7： background:green !important;background:blue; 区别IE7与FF： background:orange; *backgro
CSS3适配不同浏览器
一转眼再次遇到你
07-30 603
1、-moz-代表firefox浏览器私有属性 2、-ms-代表ie浏览器私有属性 3、-webkit-代表safari、chrome私有属性 4、-o-代表Opera 这些是为了兼容老版本的写法，比较新版本的浏览器都支持直接写：border-radius。 Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。 Firefox、Chrome 以及 Safari 支持所有新的边框属性。 对于 border-image：Safari 5 以及更老的版本需要
css 兼容通过判断不同的浏览器
yuan8080的专栏
04-11 1105
只要在head引入就可以 /**************************************/ 放在js的目录下 judge_browsers.js如下： var Sys = {};   var ua = navigator.userAgent.toLowerCase();   var s;   (s = ua.match(/msie ([\d.]+
height css在不同浏览器写法
最新发布
06-01
在不同浏览器中设置元素的高度（height 属性）的写法可能略有不同，具体如下： 1. 在 Chrome 和 Safari 浏览器中，height 属性可以使用百分比、像素值、em 等单位，如下所示： ``` height: 100%; height: 200px; height: 2em; ``` 2. 在 Firefox 浏览器中，height 属性也可以使用百分比、像素值、em 等单位，但是有时候需要注意一些细节问题，如下所示： ``` height: 100%; /* 可能会失效 */ height: 200px; height: 2em; ``` 3. 在 Internet Explorer 浏览器中，height 属性可以使用像素值和百分比，如下所示： ``` height: 100%; height: 200px; ``` 总之，在不同浏览器中设置元素的高度时，建议使用标准的 CSS 语法和属性，同时进行一些必要的兼容性处理，以确保网页在不同浏览器中的兼容性和稳定性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值