浏览器的兼容问题

1.浏览器内核：

Mozilla Firefox ( Gecko )

Internet Explorer ( Trident )

Opera ( Presto )

Safari ( WebKit )

Google Chrome ( WebKit )

2.css hack

解决浏览器兼容的主要方法是css hack

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

IE6

IE7

IE8

Firefox

Opera

Safari

!important

Y

Y

Y

Y

Y

_

Y

*

Y

Y

*+

Y

\9

Y

Y

Y

\0

Y

nth-of-type(1)

Y

Y

如何解决浏览器的兼容性

在head标签中加入meta 类型<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，这样就解决了ie7、ie8兼容问题。现在剩下ie6、ie7、Firefox、Chrome(Safari与Chrome使用同一内核)、Opera这几种浏览器的兼容性问题，我们需要使用CSS Hack来解决该问题。代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<title>浏览器兼容性问题</title>

<style type="text/css">

.t1

{

color:#000000; /* 所有浏览器都支持 此处填写Firefox的css*/

*color:#0000FF; /* ie6 id7 支持 此处填写ie7的css*/

_color:#66CCCC; /* ie6支持  此处填写ie6的css*/

}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)

{ .t1{color:#9900FF}} /* oprea支持  此处填写oprea的css*/

@media screen and (-webkit-min-device-pixel-ratio:0)

{

.t1{color:#336600}/* Chrome、Safari支持  此处填写Chrome的css*/

}

</style>

</head>

<body>

<div class="t1">ff、ie8、ie7、ie6、oprea、Safari兼容性css 书写模式<br>

.t1{

color:#000000; /* 所有浏览器都支持 此处填写Firefox的css**/<br>

*color:#0000FF; /* ie6 id7 支持 此处填写ie7的css*/<br>

_color:#66CCCC; /* ie6支持  此处填写ie6的css*/<br>

}<br>

/* oprea支持此处填写oprea的css*/<br>

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)<br>

{ .t1{color:#CC66FF}}<br>

/* Chrome、Safari支持 此处填写Chrome的css*/<br>

@media screen and (-webkit-min-device-pixel-ratio:0)

{

.t1{color:#336600}}

}

</div>

</div>

</body>

</html>

1. 默认的内外边距不同

问题：

各个浏览器默认的内外边距不同

解决：

*{margin:0;padding:0;}

2. 水平居中的问题

问题：

设置 text-align: center

ie6-7文本居中，嵌套的块元素也会居中

ff /opera /safari /ie8文本会居中，嵌套块不会居中

解决：

块元素设置

1、margin-left:auto;margin-right:auto

2、margin:0 auto;

3、<div align=”center”></div>

3. 垂直居中的问题

问题：

在浏览器中 想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle1，但是文本框的内容不会垂直居中

解决：

给容器设置一个与其高度相同的行高

line-height:与容器的height一样

4. 关于高度问题

问题：

如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。

如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框

解决：

1.设置overflow:hidden;

2.高度自增height:auto!important;height:100px;

5. IE6 默认的div高度

问题：

ie6默认div高度为一个字体显示的高度，所在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度

解决：

为这个容器设置下列属性之一

1、设置overflow:hidden;

2、设置line-height:1px;

3、设置zoom:0.08

6. IE6 最小高度(宽度)的问题

问题：

ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。

解决：

    使用ie6不支持但其余浏览器支持的属性!important。

设置属性min-height:200px; height:auto !important; height:200px;

7. td高度的问题

问题：

table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度

解决：

设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示

8. div嵌套p时，出现空白行

问题：

div中显示<p>文本</p>，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。

解决：

设置p的margin:0px，再设置div的padding-top和padding-bottom

9. IE6-7图片下面有空隙的问题

问题：

块元素中含有图片时，ie6-7中会出现图片下有空隙

解决：

1、在源代码中让</div>和<img>在同一行

2、将图片转换为块级对象display:block;

3、设置图片的垂直对齐方式  vertical-align:top/middle/bottom

4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置： overflow:hidden; 

5、设置图片的浮动属性  float:left;

10. IE6双倍边距的问题

问题：

ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题

例float:left;width:100px;margin:0 100px; 

解决：

       设置display:inline;

10. IE6双倍边距的问题

问题：

ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题

例float:left;width:100px;margin:0 100px; 

解决：

       设置display:inline;

12. IE6两个层之间3px的问题

问题：

       左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距

解决：

1、右边层也采用浮动  float

2、左边层添加属性  margin-right:-3px;

13. IE6 子元素绝对定位的问题

问题：

       父级元素使用padding后，子元素使用绝对定位，不能精确定位

解决：

       在子元素中设置  _left:-20px; _top:-1px;

 

14. 显示手型cursor:hand

问题：

       ie6/7/8、opera       都支持  但是safari 、 ff 不支持

解决：

写成 cursor:pointer;  (所有浏览器都能识别)   

15. IE6-7 line-height失效的问题

问题：

       在ie中img与文字放一起时， line-height不起作用 

解决：

都设置成float

16. td自动换行的问题

问题：

Table宽度固定，td自动换行

解决：

设置Table的table-layout:fixed，td的word-wrap:break-word

18. 透明png图片会带背景色

问题：

在ie6下透明的png图片会带一个背景色

解决：

background-image: url(icon_home.png);/* 其他浏览器 */

background-repeat: no-repeat;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */

_background-image: none; /* IE6 */

23. ul或li浮动后，显示在div外

问题：

div中的ul或li设置float以后，都不在div中

解决：

必须在ul标签后加<div style="clear:both"></div>来闭合外层div

32. li中的内容以省略号显示

问题：

li中内容超过长度时，想以省略号显示， 此方法适用于ie6-7-8、opera、safari浏览器

ff浏览器不支持

解决：

li{width:200px; white-space:nowrap;text-overflow:ellipsis;

-o-text-overflow:ellipsis; overflow: hidden; }

 

35. 除去滚动条的问题

问题：

       隐藏滚动条

解决：

1、只有ie6-7支持<body scroll="no">

2、除ie6-7不支持 body{overflow:hidden}

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

41. ff、chrome绝对定位无效

问题：

在IE给td设置position:relative，然后给它包含的一个容器使用position:absolute进行定位是有效的，但在FF和Chrome下却不可以。

解决：

设置td的display:block。

42. IE6 绝对定位的问题

问题：

<div style="position:relative;border:1px solid orange;text-align:center;">

<div style="position:absolute;top:0;left:0;

background:#CCC;">dovapour</div>

<a href="#" title="vapour的blog">内容</a>

</div>

解决：

left的定位错误问题

1、给父层设置zoom:1触发layout。

2、给父层设置宽度width

bottom的定位错误问题

1、给父层设置zoom:1触发layout。

2、给父层设置高度height

3. 子容器宽度大于父容器宽度时，内容超出

问题：

子DIV的宽度和父DIV的宽度都已经定义，在IE6中如果其子DIV的宽度大于父DIV的宽度，父DIV的宽度将会被扩展，在其他浏览器中父DIV的宽度将不会扩展，子DIV将超出父DIV

解决：

设置overflow:hidden，子DIV将不会超出父DIV。

12、设置滚动条颜色 只对ie系列有效 在html中 而不是设置body

<style type="text/css">

html {

scrollbar-face-color:#f6f6f6;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeeee;

scrollbar-3dlight-color:#eeeeee;

scrollbar-arrow-color:#000;

scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff;

}

</style>

IE不支持float：inherit  overflow:hidden有2个用法，一个是隐藏溢出，另一个是清除浮动。

<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素

<body οncοntextmenu="return false" οndragstart="return false"  tstart="return false"  scroll="auto">

这行代码放在body中，去掉了页面鼠标右键快捷菜单，达到防止图片另存为的目的。

转载于:https://www.cnblogs.com/lijingsi9210/p/6014161.html

关于浏览器兼容问题及hack写法相关推荐

  1. html网页改兼容模型,浏览器兼容、CSS hack、normalize.css及盒模型基础知识问答

    一.问题(一).如何调试 IE 浏览器 1.对于IE7及以下版本可采用IETester(不能测脚本,模拟出来的IE6平台与真实的IE6还是有差异的,结果不完全可靠).Expression Web Su ...

  2. 各浏览器的Hack写法【转】

    Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack ...

  3. css ie9 打印 hack,IE9下css hack写法

    ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下: select { background-color:red\0; ...

  4. css hack支持ie8,仅仅 IE8 有效的 CSS hack 写法

    IE8 CSS hack 就是在属性后面加上 \9 或者 \0,代码如下: color:#FFF\0; /* IE8 */ color:#FFF\9; /* 所有IE浏览器(ie6+) */ 上面的 ...

  5. ie浏览器样式兼容写法_IE浏览器兼容问题-----html和css的兼容写法

    用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...

  6. 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解

    什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...

  7. CSS hack浏览器兼容一览表

    CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助. 屏蔽IE浏览 ...

  8. 解决各大浏览器兼容问题hack方法总结

    解决各大浏览器兼容问题hack,IE6/ IE7/ IE8/ IE9/ Firefox/ Opera/ Webkit/ Chrome/ Safari. 方法一 1 color:red; /* 所有浏览 ...

  9. 主流浏览器Cssjs hack写法

    参考: BROWSER HACKS 主流浏览器的Hack写法 转载于:https://www.cnblogs.com/huangtailang/p/7279634.html

最新文章

  1. python精品课_【人生苦短，我用Python】Python免费精品课连载(1)——Python入门
  2. 复分析可视化方法：笔记：log(z)的可视化微分法
  3. viewholder
  4. python上机实验报告读取文件_Python程序设计实验报告八 ： 文件
  5. Collection和Collections区别
  6. java jdbc实验,实验八 Java-JDBC编程
  7. 第一章 WebGL简介 Introduction
  8. 4.6 GoogLeNet CNN、tensorflow实现——python实战
  9. ANSYS Maxwell 2D永磁体建模
  10. 基层干部计算机培训方案,基层管理干部培训方案
  11. 【Python从入门到精通】（一）就简单看看Python吧
  12. ACM题解——贪心——卫星安装
  13. linux下docker的使用教程,Linux中docker的使用方法讲解
  14. 关于 Swift Package Manager 的一些经验分享
  15. Bentley 软件公司将以约 10.5 亿美元的价格收购全球领先的地球科学三维建模软件提供商 Seequent
  16. maven如何排除依赖
  17. 贵州省谷歌卫星地图下载
  18. 史上最简单的 MySQL 教程
  19. 知情人士称百事与广药集团谈判 密购王老吉
  20. LM2577 DC/DC 升降压模块

热门文章

  1. Aspose.PSD for .NET 22.11.0 Crack
  2. 百度翻译 打不开 桌面端 无法启动
  3. 管理大型项目的5条诀窍：如何完成看似不可能完成的事情
  4. threejs + mapboxgl 实现能量护盾效果
  5. java Hutool发送邮件附带附件 使用文件流、字节数组方式
  6. ASP.NET 获取网站根目录的路径
  7. 自考计算机应用与基础怎么考,自考计算机应用基础实践怎么考？
  8. 使用NPOI设置Excel单元格格式
  9. CA认证与HTTPs原理介绍
  10. css 修改三角形大小_css实现三角形