关于浏览器兼容问题及hack写法
浏览器的兼容问题
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写法相关推荐
- html网页改兼容模型,浏览器兼容、CSS hack、normalize.css及盒模型基础知识问答
一.问题(一).如何调试 IE 浏览器 1.对于IE7及以下版本可采用IETester(不能测脚本,模拟出来的IE6平台与真实的IE6还是有差异的,结果不完全可靠).Expression Web Su ...
- 各浏览器的Hack写法【转】
Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack ...
- css ie9 打印 hack,IE9下css hack写法
ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下: select { background-color:red\0; ...
- css hack支持ie8,仅仅 IE8 有效的 CSS hack 写法
IE8 CSS hack 就是在属性后面加上 \9 或者 \0,代码如下: color:#FFF\0; /* IE8 */ color:#FFF\9; /* 所有IE浏览器(ie6+) */ 上面的 ...
- ie浏览器样式兼容写法_IE浏览器兼容问题-----html和css的兼容写法
用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...
- 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...
- CSS hack浏览器兼容一览表
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助. 屏蔽IE浏览 ...
- 解决各大浏览器兼容问题hack方法总结
解决各大浏览器兼容问题hack,IE6/ IE7/ IE8/ IE9/ Firefox/ Opera/ Webkit/ Chrome/ Safari. 方法一 1 color:red; /* 所有浏览 ...
- 主流浏览器Cssjs hack写法
参考: BROWSER HACKS 主流浏览器的Hack写法 转载于:https://www.cnblogs.com/huangtailang/p/7279634.html
最新文章
- 2021-2027年中国医疗美容市场研究及前瞻分析报告
- 第五次作业 何雅
- 防火墙 linux 端口,Linux配置防火墙端口 8080端口
- wap问答系统工作总结
- 手把手教你,Java如何实现二维码?【附源码】
- [ZJOI2009]取石子游戏
- react字符串转html函数,react 字符串强转为html标签
- IntelliJ IDEA 使用心得与常用快捷键
- 判断中文文本是否为utf8编码类型的javascript实现_Go语言实现LeetCode算法:393 UTF-8编码校验...
- 【数字图像处理】直方图规定化(含实现代码)
- 第二人生的源码分析(二十五)人物行走与服务器同步
- [转载]2012 年 4 月,水王排行榜
- 计算机机箱最新推出的是什么架构,独特三舱位结构:LIANLI 联力 推出 PC-O12 E-ATX 全塔机箱...
- linux c 获取进程p id,详解Linux获取线程的PID(TID、LWP)的几种方式
- 女工下班路上被3男子拖入黑巷 身中10多刀身亡
- 第三章 opengl之着色器
- python与cgi
- 开源 安卓项目汇总
- 2022-12-30:某天小美进入了一个迷宫探险,根据地图所示,这个迷宫里有无数个房间 序号分别为1、2、3、...入口房间的序号为1 任意序号为正整数x的房间,都与序号 2*x 和 2*x + 1
- 轻量级姿态估计技巧综述