2.Css的浏览器兼容性

方法一，根据不同的浏览器加载不同的css file

<!DOCTYPE html> 

<html>

<head>

<title>Test Page</title>

<link href="ie.css" rel="stylesheet" type="text/css" />

</head>

<script type="text/javascript">

function loadjscssfile(filename, filetype) {

if (filetype == "js") { //if filename is a   external JavaScript file

var fileref = document.createElement('script')

fileref.setAttribute("type", "text/javascript")

fileref.setAttribute("src", filename)

}

else if (filetype == "css") { //if filename is an   external CSS file

var fileref = document.createElement("link")

fileref.setAttribute("rel", "stylesheet")

fileref.setAttribute("type", "text/css")

fileref.setAttribute("href", filename)

}

if (typeof fileref != "undefined")

document.getElementsByTagName("head")[0].appendChild(fileref)

}

if   (navigator.appName == "Netscape") {

loadjscssfile("chrome.css", "css");

}

</script>

<body>

<div class="container">

</div>

</body>

</html>

Chrome专用的css file中只需要写和ie不同的部分即可，不需要全部copy, 后加载的样式会自动覆盖原有的样式。

 

 

方法二，Css Hack

<!DOCTYPE html>

<html>

<head>

<title>Css Hack</title>

<style>

#test

{

width:300px;

height:300px;

background-color:blue;

}

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and   safari浏览器认识*/

</style>

</head>

<body>

<div id="test">test</div>

</body>

</html>

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }这个是浏览器chrome和safari的。即将样式用

@media screen and (-webkit-min-device-pixel-ratio:0){}装起来

JS和CSS的多浏览器兼容(2)的更多相关文章

  1. JS和CSS的多浏览器兼容(3)

    3.Javascript的浏览器兼容性问题 3.1 集合类对象问题说明:IE下,可以使用()或[]获取集合类对象; Safari及Chrome下,只能使用[]获取集合类对象. 解决方法:统一使用[]获 ...

  2. JS和CSS的多浏览器兼容(1)

    1.指定文件在IE浏览器中的兼容性模式 要为你的网页指定文件模式,需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头.以下是指定为Emulate IE7 m ...

  3. JS控制CSS3，添加浏览器兼容前缀

    不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容.比如: div { transform: rotate(30deg); ...

  4. 浅谈CSS hack（浏览器兼容）

    今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

  5. CSS在不同浏览器兼容问题,margin偏移/offset溢出等

    margin在垂直取值时取最大值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. 在不同的浏览器使用不同的css样式,解决浏览器兼容问题

    区别IE6与FF:       background:orange;       *background:blue; 区别IE6与IE7:       background:green !import ...

  7. 关于引用JS和CSS文件刷新浏览器缓存问题，部署服务器后客户端样式不刷新

    问题描述 对样式的css文件进行了修改,部署到服务器后访问发现页面展示不正常,但是刷新之后就会展示正常. 问题分析 研究之后发现可能的原因有 css文件过大,加载缓慢 本地缓存问题,虽然服务器修改了c ...

  8. JS中常遇到的浏览器兼容问题和解决方法

    今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...

  9. JS中常遇到的浏览器兼容问题和解决方法【转】

    今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...

随机推荐

  1. PHP框架Yii2.0安装（基础版、高级版）

    最近农成也是切入了yiiframework 2.0,就是安装yii2.0就花费了不少的时间,为此做了很多的弯路,特此写一篇博文来给后面学习的同学少走一点的弯路.写的不好的地方欢迎各位学习的同学们能够指 ...

  2. javascript设计模式学习之二——this

    一.this指向问题 1)默认绑定,即作为独立的普通函数调用 此时this指向全局对象window,如果是严格模式下,则指向undefined; 2)隐式绑定,即具有调用上下文(一种场景就是作为对象的 ...

  3. 解决Regsvr32: DllRegisterServer entry point was not found

    原因: 虽然项目里面包含了DEF文件, 但是尼玛没有配置项目属性让链接器处理它啊! 解决方案: 项目属性->链接器->输入->模块定义文件->{输入文件名}

  4. Java基础之泛型——使用二叉树进行排序（TryBinaryTree）

    控制台程序. 1.实现针对容器类的基于集合的循环 为了让容器类类型的对象能够在基于集合的for循环中可用,类必须并且只需要满足一个要求——必须实现泛型接口java.lang.Iterable<& ...

  5. Eclipse 调试 Java 程序的技巧

    - 断点视图 : 条件断点 如果你只对应用中的某部分感兴趣的话,这个功能非常有用.例如,如果你要在第13次循环的时候检查程序,或者在一个抽象父类中调试某些功能,而你只关注其中一个具体的实现.你可以在断 ...

  6. Tomcat学习 HttpConnector和HttpProcessor启动流程和线程交互

    一.tomat启动流程 1.启动HttpConnector connector等待连接请求,只负责接受socket请求,具体处理过程交给HttpProcessor处理. tomcat用户只能访问到co ...

  7. Jenkins自动构建

    Jenkins is an award-winning, cross-platform, continuous integration and continuous delivery applicat ...

  8. 卸载了mysql之后，mysql服务仍在，显示读取描述失败，错误代码2

    卸载了mysql之后,mysql服务仍在,显示读取描述失败,错误代码2 用360软件管家,卸载mysql5.5,卸载了mysql之后,再依次删除 mysql的安装目录.c盘下的隐藏文件夹Program ...

  9. mysql explain

    我们使用EXPLAIN解析SQL执行计划时,如果有下面几种情况,就需要特别关注下了: 首先看下 type 这列的结果,如果有类型是 ALL 时,表示预计会进行全表扫描(full table scan) ...

  10. 自定义Scrollview--实现仿淘宝Toolbar透明度渐变效果

    ,上个月做了下电商的项目,本来以为本简单的,但做起来还是遇到了不少的问题,上个周五项目就上线了,不过时间还是很紧,PM给了我两天时间总结总结,然后又要开始一个新的项目和这个项目的迭代,感觉又要开始累死 ...