浏览器兼容性问题解决方案之CSS,已在IE、FF、Chrome测试

当前主浏览器的核心是什么?

1) Trident:IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的 IE7。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如 Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等)。

2) Geckos: Netcape6开始采用的内核,后来的FF也采用了该内核,Geckos的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。

3) Presto:目前Opera采用的内核,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。

4) Webkit:Safari浏览器使用的内核。Google的Chrome浏览器也是采用Webkit。Webkit引擎包含WebCore排版引擎及 JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软件,在GPL条约下授权,同时支持BSD系统的开 发。所以Webkit也是自由软件,同时开放源代码。在安全方面不受IE、Firefox的制约,所以Safari浏览器还是比较安全的浏览器。

我整理的一些实例,都是在谷歌、IE7、IE8、IE9、IE10、FF中测试过。

实例:

1) 隐藏浏览器的滚动条

问题:

隐藏浏览器的滚动条

解决:

1) 只有ie7支持<bodyscroll="no">

2) 除ie7不支持body{overflow:hidden}

3) 所有浏览器html{overflow:hidden}

实例:

1) 只有ie7支持<body scroll="no">

<span style="font-size:18px;">           <body scroll="no" ></body></span> 

  2)除ie7不支持 body{overflow:hidden}

    <span style="font-size:18px;">           <body style="overflow:hidden" ></body></span>  

3) 所有浏览器 html{overflow:hidden}

<span style="font-size:18px;">           <body style="overflow:hidden" ></body></span>

超链接访问过后hover样式不出现的问题

问题:

点击超链接后,hover、active样式没有效果

解决:

改变CSS属性的排列顺序:L-V-H-A

    <style type="text/css">
    a:link {color: #FF0000}     /* 未访问的链接 */
    a:visited {color: #00FF00}  /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
    a:active {color: #0000FF}   /* 被选择的链接 */
    </style>  

li中的内容以省略号显示

问题:

li中内容超过长度时,想以省略号显示,此方法适用于ie7、8、9、10,谷歌,ff浏览器

li{
list-style-type:none;
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
 } 

使连续长字段自动换行

div
{
width:300px;
word-wrap:break-word;
border:1px solid red; }

浏览器兼容性问题解决方案之CSS,已在IE、FF、Chrome测试,布布扣,bubuko.com

时间: 2024-10-30 16:32:05

浏览器兼容性问题解决方案之CSS,已在IE、FF、Chrome测试的相关文章

IE浏览器兼容性问题解决方案

IE浏览器兼容性问题解决方案一.CSS常见问题 1.H5标签兼容性 解决方案:<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> 2.元素浮动之后,能设置宽度的话就给元素加宽度,如果需要宽度是内容撑开的,就给它里边的块元素加上浮动float:left; 3.第一块元素浮动,第二块元素加margin-left值等于第一块元素宽度,在IE6下会有间隙问题 解决

浏览器兼容性问题解决方案

以下内容参考与dandanzmc文章. 什么是浏览器兼容问题? 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 为什么会出现浏览器兼容问题? 浏览器兼容问题的出现,是因为各个浏览器对W3C标准支持的程度不同而导致的.如果网页都是一个标准的话,也不会又这种问题,但微软把自

转载-没有IE就没有伤害!浏览器兼容性问题解决方案汇总

普及:浏览器的兼容性问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义不一致导致的.俗话说:没有IE就没有伤害. 贴士:内容都是自己总结的,不免会出现错误或者bug,欢迎更正和补充,本帖也会不断更新. Normalize.css 不同浏览器的默认样式存在差异,可以使用 Normalize.css 抹平这些差异.当然,你也可以定制属于自己业务的 reset.css <link href="https://cdn.bootcss.com/normalize/7.0.0/

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能有一点bug,于是和同事讨论该如何解决,于是就有了这篇文章. 一.起因回顾 最近项目里面有一个表格需求,该表格列是动态产生的,而且列的数量操作一定值以后就会出现横向滚动条,滚动的时候需要前面几列固定.也就是所谓的excel的冻结列功能.该如何实现呢?不用多说,当然是查文档,于是找到了这篇http:/

CSS 多浏览器兼容性问题及解决方案

css的兼容性也是大家关注的热点.大家一定要注意多测试. Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4.div 的垂直居中问题: vertical-

常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器

常见浏览器兼容性问题与解决方案css篇

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 问题症状:常见症状

常见的浏览器兼容性问题与解决方案——CSS篇

1.不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{margin:0;padding:0}.也可以使用其他网站的初始化代码. 备注:这个是最常见的也是最容易解决的一个浏览器兼容性问题. 2.块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 问题症状:常见的是IE6中后面的一块被顶到下一行. 碰到频率:90% 解

转 CSS 多浏览器兼容性问题及解决方案

兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字