不同浏览器放不同样式表文件

最新推荐文章于 2024-07-16 17:18:30 发布
最新推荐文章于 2024-07-16 17:18:30 发布
阅读量1.7k 收藏
点赞数
分类专栏： Div+CSS 文章标签： 浏览器 firefox css ie file javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xcysuccess3/article/details/7030135
版权 
根据分辨率不同，调用不同的css文件方法不同浏览器调用不同CSS文件 


将以下JS代码放入<head>和</head>标签内，此段JS代码作用是辨别浏览器分辨率 <SCRIPT LANGUAGE="javascript"> 
　　<!-- 
　　if (window.navigator.userAgent.indexOf("MSIE")>=1) 
　　{ 
　　var IE1024=""; 
　　var IE800=""; 
　　var IE1152=""; 
　　var IEother=""; 
　　ScreenWidth(IE1024,IE800,IE1152,IEother) 
　　}else{ 
　　if (window.navigator.userAgent.indexOf("Firefox")>=1) 
　　{ 
　　file://如果浏览器为Firefox 
　　var Firefox1024=""; 
　　var Firefox800=""; 
　　var Firefox1152=""; 
　　var Firefoxother=""; 
　　ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) 
　　}else{ 
　　file://如果浏览器为其他 
　　var Other1024=""; 
　　var Other800=""; 
　　var Other1152=""; 
　　var Otherother=""; 
　　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="style/"+title; 
　　} 
　　file://--> 
　　</SCRIPT> 
 






解释：
var IE1024="";
var IE800="";
var IE1152="";
var IEother=""; 


引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名. 




       var Firefox1024="";
　　var Firefox800="";
　　var Firefox1152="";
　　var Firefoxother=""; 




引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。　　 


　　var Other1024="";
　　var Other800="";
　　var Other1152="";
　　var Otherother=""; 




引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。 






不判断分辨率，只判断浏览器 


应E.Qiang提议，编如下代码。实现根据浏览器类型自动调用不同CSS。 




调用不同CSS文件JS代码： 
<SCRIPT LANGUAGE="javascript"> 
<!-- 
if (window.navigator.userAgent.indexOf("MSIE")>=1) 
{ 
file://如果浏览器为IE 
setActiveStyleSheet("default.css"); 
}else{ 
if (window.navigator.userAgent.indexOf("Firefox")>=1) 
{ 
file://如果浏览器为Firefox 
setActiveStyleSheet("default2.css"); 
}else{ 
file://如果浏览器为其他 
setActiveStyleSheet("newsky.css"); 
} 
} 
function setActiveStyleSheet(title){ 
document.getElementsByTagName("link")[0].href="style/"+title; 
} 
file://--> 
</SCRIPT>






解释： 


如果浏览器为IE，则调用default.css
如果浏览器为Firefox，则调用default2.css
如果浏览器为其他，则调用newsky.css
用法：放在<head></head>中即可。


向晨宇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS项目实践七：同一个HTML页面，在不同浏览器上的显示效果不一样！解决HTML页面的浏览器兼容问题
王迪
12-29 1万+
表象问题：同一个HTML页面，在不同浏览器上的显示效果不一样。 问题分析：由于浏览器的内核不一样，每个浏览器对标签的解释都有自己的规则，因而会造成显示效果不一样，称之为浏览器不兼容。对浏览器兼容问题，一般分，HTML，Javascript兼容，CSS兼容。 其中html相关问题比较容易处理，无非是高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析，所以平时注意一点就是。   1、浏览...
html写了外部样式表,外部样式表怎么写
weixin_36121354的博客
06-03 6032
1.css内部样式表怎么写1、创建使用css样式表有三种，分别是外部样式表，内部样式表和内联样式。下面通过一个小demo演示它们的用法。首先新建一个html文件，放入3个button按钮，给前两个按钮分百别设置class属性为btn1和btn2，如下图。2.然后准备一个名为demo的CSS文件。在css文件中写入buttonA的样式，并保存css文件：3,HTML文件，使用链接在你的样式标签标签的...
如何让不同的HTML代码适应不同的浏览器
qq_30909577的博客
02-23 4701
不用js，直接在HTML代码中，也可以要求不同的浏览器执行不同的HTML代码。 这里利用到IE注释。 这是版本小于等于7的Internet Explorer 这是版本大于7的Internet Explorer --> 这不是Internet Explo
在不同的浏览器使用不同的css样式,解决浏览器兼容问题
热门推荐
菜鸟 on the road
07-23 3万+
<br /><br />让CSS区别不同浏览器 <br />区别不同浏览器，CSS hack写法：<br /><br />区别IE6与FF：<br />       background:orange;*background:blue;<br /><br />区别IE6与IE7：<br />       background:green !important;background:blue;<br /><br />区别IE7与FF：<br />       background:orange; *backg
前端开发如何做到4个一致
小李专栏
08-06 1364
如果您喜欢这些文章，欢迎点击此处订阅本Blog<!-- google_ad_client = "pub-7343546549496470";/* 728x90, 大横幅正文上方 */google_ad_slot = "4725362798";google_ad_width = 728;google_ad_height =
html5知识点：多终端浏览器兼容
关注我！带你一路 "狂飙" 到底！
11-23 2770
什么是多终端？多终端就是包括了我们的电脑，手机，手持式移动设备比如ipad等。因为各类设备的显示屏幕大小不一，分辨率不一，最佳可视效果的横竖设置也不一样，所以多终端浏览器兼容主要就是学习如何让我们的项目在多终端上呈现相同的显示效果，它主要涉及到两块知识点。
html没有加载css样式表,浏览器不加载css文件是什么原因？
weixin_26882891的博客
06-03 2404
浏览器不加载css文件是什么原因？本篇文章给大家简书介绍一下浏览器加载不上css样式文件的原因。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。如果你的浏览器加载不上外联css文件(注意是全部加载不上，这里排除部分样式不兼容问题)，可以看看：1、首先考虑是否css路径错误。2、css文件中指定的编码与页面不统一，浏览器用页面编码解析css，自然会出错。例如：html给的gb2312...
重置样式表——去掉浏览器默认的网页样式
Nurbiya_K的博客
10-22 1697
默认样式： 通常情况下，浏览器都会为元素设置一些默认样式 默认样式的存在会影响到页面的布局，通常情况下编写网页 时必须要去除浏览器的默认样式（pc端要去除掉浏览器的默认样式） 一般浏览器默认样式对块元素会留下一点外边距 就是说不会紧贴浏览器边缘，这个时候就需要给整个浏览器 添加一些样式，比如 margin :0 ; body 是对整个浏览器
css统一各浏览器样式,页面布局（CSS）：统一浏览器的基础样式《 从设计到代码：布局设计 》...
weixin_39588209的博客
08-03 933
不同浏览器针对 html 标签都有各自预设的一些样式，我们可以想办法统一一下这些基础样式。先这样试一下，在这个 html 的 body 标签里输入一组 div 。然后打开 page.css， 设置一下 div 标签的样式，把高度设置成 96px ，再用 background 设置一下背景颜色。你会发现，这个 div 容器的周围会留出一点空间，这是因为浏览器在 body 标签上用了一点边距。我们可以...
jquery实现不同大小浏览器使用不同的css样式表的方法
10-26
jQuery 提供了一个灵活的方法，使得开发者可以根据浏览器窗口的大小来动态加载不同的CSS样式表，从而实现响应式布局。以下是对给定标题和描述中的知识点的详细解释： 1. **jQuery 基础**：jQuery 是一个广泛使用的 ...
CSS样式表教程：浏览器默认样式
09-27
然而，不同浏览器之间对相同HTML元素的默认样式处理存在差异，这是CSS样式表教程中经常提到的一个问题。这种差异性可能导致同一个网页在不同的浏览器上显示效果不一致，甚至可能破坏整体布局。因此，理解并掌握...
浏览器默认样式表
06-15
了解这些浏览器的默认样式表对于前端开发者至关重要，因为它们可以帮助理解为何同一份代码在不同浏览器中可能显示不同。为了实现跨浏览器的兼容性，开发者通常会使用reset CSS或者normalize.css来消除这些差异，确保...
浏览器默认样式
09-25
- Chrome/Safari (Webkit)：查看Webkit的默认样式表通常需要查看源代码或参考Webkit的开发文档。 - Opera：查看Opera的默认样式方法未明确给出，但通常也需要查阅官方文档或解压安装文件。 了解浏览器默认样式并...
同一html页面中不同链接的不同样式的css代码
09-25
在CSS（层叠样式表）的帮助下，我们可以轻松地完成这一任务。本篇将详细讲解如何在同一HTML页面中为不同链接定义不同的样式。 首先，了解CSS中针对链接的四种伪类选择器： 1. `a:link` - 用于定义未访问过的链接...
【Tomcat目录详解】关于Tomcat你还需要了解的详细内容
一捌柒的博客
07-11 1134
除了Tomcat的基础安装和配置外，我们还需要知道Tomcat中各个文件的作用和注意点
2024年公共文化与社会服务国际会议（ICPCSS 2024）
wx19980549140的博客
07-12 1043
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 714
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 402
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
qt样式表qss文件下载
08-10
要下载Qt样式表（QSS）文件，可以按照以下步骤进行操作： 1. 打开浏览器，并进入Qt官方网站（https://www.qt.io）。 2. 点击菜单栏上的“下载”选项，进入下载页面。 3. 在下载页面的搜索框中输入“QSS”，然后...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值