兼容性

最新推荐文章于 2021-03-28 23:03:11 发布
最新推荐文章于 2021-03-28 23:03:11 发布
阅读量206 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013556505/article/details/54826298
版权

IE6下子元素撑开父级宽度


在IE67下元素浮动，如果宽度需要内容撑开，就给里面的块元素都加浮动


在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动


p中嵌套h，就会出现2个p标签


IE6下最小高度问题
在IE6下元素的高度小于19px的时候，会被当做19px来处理
解决办法:overflow:hidden;


1px dotted 在IE6下不支持
解决办法:切背景平铺，例如变成2px？


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{margin:0;}
.box{background:blue;border:1px solid #000;zoom:1;}
.div{width:200px;height:200px;background:red;margin:100px;}
/*
	在IE6下解决margin传递要触发haslayout
	
	在IE6下父级有边框的时候，子元素的margin值消失
	
	解决办法:触发父级的haslayout:加zoom:1;

	或者给其一加上浮动
	或者overflow:hidden;zoom:1;
*/
</style>
</head>
<body>
<div class="box">
	<div class="div"></div>
</div>
</body>
</html>

IE6下双边距BUG
在IE6，块元素有浮动和和横向的margin值 ，横向的margin值会被放大成两倍
解决办法: display:inline;


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ float:left;border:10px solid #000;}
.box div{width:100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;}
/*
	margin-right 一行右侧第一个元素有双边距
	
	margin-left 一行左侧第一个元素有双边距
*/
</style>
</head>
<body>
<div class="box">
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul{margin:0;padding:0;width:302px;}
li{ list-style:none;height:30px;border:1px solid #000; vertical-align:top;}
a{width:100px;float:left;height:30px;background:Red;}
span{width:100px;float:right;height:30px;background:blue;}
/*
	在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙
	解决办法:
		1.给li加浮动
		2.给li加vertical-align
*/
</style>
</head>
<body>
<ul>
	<li>
    	<a href="#"></a>
        <span></span>
    </li>
    <li>
    	<a href="#"></a>
        <span></span>
    </li>
    <li>
    	<a href="#"></a>
        <span></span>
    </li>
</ul>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul{margin:0;padding:0;width:302px;}
li{ list-style:none;height:12px;border:1px solid #000;overflow:hidden; float:left;width:300px;}
a{width:100px;float:left;height:12px;background:Red;}
span{width:100px;float:right;height:12px;background:blue;}
/*
	在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙
	解决办法:
		1.给li加浮动
		2.给li加vertical-align
		
		当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动 别忘记解决最小高度问题应加上overflow:hidden
*/
</style>
</head>
<body>
<ul>
	<li>
    	<a href="#"></a>
        <span></span>
    </li>
    <li>
    	<a href="#"></a>
        <span></span>
    </li>
    <li>
    	<a href="#"></a>
        <span></span>
    </li>
</ul>
</body>
</html>


当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效


文字溢出bug

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:400px;}
.left{float:left;}
.right{width:400px;float:right;}
</style>
</head>
<body>
<div class="box">
	<div class="left"></div>
    <div><!-- IE6下的文字溢出BUG --><span></span></div>
    <div class="right">↓leo是个大胖子</div>
</div>
<!--
	在IE6下的文字溢出BUG
    
    子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素
    
    解决办法:用div把注释或者内嵌元素用div包起来	
-->
</body>
</html>



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px;height:200px;border:1px solid #000; position:relative;}
span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}
ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}/*IE6下双边距bug
在IE6下，块元素有浮动和横向的margin，横向的margin会被放大2倍
解决办法：display：inline*/
/*
	当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失
	解决办法:
		给定位元素外面包个div
*/
</style>
</head>
<body>
<div class="box">
	<ul></ul>
    <div><span></span></div>
</div>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px;height:200px;border:1px solid #000; overflow:auto; position:relative;}
.div{ width:150px;height:300px;background:yellow; position:relative;}
/*
	在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素
	
	解决办法: 给父级也加相对定位
*/
</style>
</head>
<body>
<div class="box">
	<div class="div"></div>
</div>
</body>
</html>



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:201px;height:201px;border:1px solid #000; position:relative;}
.box span{ width:20px;height:20px;background:yellow; position:absolute;right:-1px;bottom:-1px;}
/*
	在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差 无法解决
*/
</style>
</head>
<body>
<div class="box">
	<span></span>
</div>
</body>
</html>

不要给tbody，tr，th同时加样式 


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px;height:32px;border:1px solid red;}
input{width:100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}/*32+2?*/
/*
	在IE6，7下输入类型的表单控件上下各有1px的间隙
	
	解决办法:给input加浮动
*/
</style>
</head>
<body>
<div class="box">
	<input type="text" />
</div>
</body>
</html>



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px;height:32px;border:1px solid red;background:yellow;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:#fff;}
/*
	在IE6，7下输入类型的表单控件上下各有1px的间隙
	
	解决办法:给input加浮动
	
	在IE6，7下输入类型的表单控件加border:none;
	
	解决办法: 重置input的背景
*/
</style>
</head>
<body>
<div class="box">
	<input type="text" />
</div>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}
/*
	在IE6，7下输入类型的表单控件上下各有1px的间隙
	
	解决办法:给input加浮动
	
	在IE6，7下输入类型的表单控件加border:none;
	
	解决办法: 重置input的背景
	
	在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动
	
	解决办法: 把背景加给父级
*/
</style>
</head>
<body>
<div class="box">
	<input type="text" />
</div>
</body>
</html>

IE6不支持png24图片。

JS插件(问题:不能处理body之上png24) 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{ background:#000;}
.box{width:400px;height:400px;background:url(img/png.png);}
</style>
<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('.box');
</script>
<![endif]-->
</head>
<body>
<div class="box"></div>
</body>
</html>

原生滤镜 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{ background:#000;}
.box{width:400px;height:400px; background:url(img/png.png);_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/png.png", sizingMethod="crop");
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<!--[if IE]>
这是IE
<![endif]-->
<!--[if IE 9]>
9
<![endif]-->
<!--[if IE 8]>
8
<![endif]-->
<!--[if IE 7]>
7
<![endif]-->
<!--[if IE 6]>
6
<![endif]-->
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:100px;height:100px;background:Red;background:blue\9; +background:yellow;_background:green;}
@media screen and (-webkit-min-device-pixel-ratio:0){.box{background:pink}}/* Webkit-Safari-Chrome */
/*
css hack：
	\9 IE10之前的IE浏览器解析
	+,* IE7包括IE7之前的IE浏览器解析
	_IE6包括IE6之前的IE浏览器	
*/
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;background:red !important; background:pink;}
/*
	在IE6下 在important 后边在家一条同样的样式，会破坏掉important的作用，会按照默认的优先级顺序来走
	样式优先级:
	默认 < 类型 < class < id < style(行间) <important 

*/
</style>
</head>
<body>
<div class="box" style="background:#000;"></div>
</body>
</html>

圣杯布局（双飞翼布局）
左右宽度固定，中间宽度自适应伸缩；并且中间先加载 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{margin:0;}
.center{height:600px;background:#f60;margin:0 200px;}
.left{width:200px;background:#fc0;height:600px; position:absolute;left:0;top:0;}
.right{width:200px;background:#fcc;height:600px;position:absolute;right:0;top:0;}
</style>
</head>
<body>
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

等高布局

左右两列高度自适应扩展，并且相等； 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{margin:0;}
.wrap{ width:900px;margin:0 auto;overflow:hidden;}
.left{width:200px;background:Red;float:left;padding-bottom:10000px;margin-bottom:-10000px;}
.right{width:700px;background:blue;float:right;padding-bottom:10000px;margin-bottom:-10000px;}
</style>
</head>
<body>
<div class="wrap">
	<div class="left">
    	  页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
    </div>
    <div class="right">
    	  页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
          页面内容<br/>
    </div>
</div>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{float:left;border:10px solid #000;margin:20px; display:inline;}
.box div{width:100px;height:100px;background:red; position:relative;}/*relative使其正常超出范围*/
.div1{margin-top:-30px;}
.div2{margin-left:-30px;}
.div3{margin-bottom:-30px;}
.div4{margin-right:-30px;}
</style>
</head>
<body>
<div class="box">
	<div class="div1"></div>
</div>
<div class="box">
	<div class="div2"></div>
</div>
<div class="box">
	<div class="div3"></div>
</div>
<div class="box">
	<div class="div4"></div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{margin:0;}
.wrap{ width:900px;margin:0 auto; border:10px solid #000; overflow:hidden;}/*overflow去掉黑框外多余的left和right*/
.wrap:after{content:"";display:block;clear:both;}
.left{width:200px;background:Red;float:left; padding-bottom:200px; margin-bottom:-200px;}/*最后2句撑开黑框*/
.right{width:200px;background:blue;float:right;padding-bottom:200px;margin-bottom:-200px;}
</style>
</head>
<body>
<div class="wrap">
	<div class="left">
    	 页面内容<br/>
         页面内容<br/>
         页面内容<br/>
         页面内容<br/>
         页面内容<br/>
    </div>
    <div class="right">
    </div>
</div>
</body>
</html>

我是小小朋友
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手机兼容性测试
测试领头羊
10-26 2737
Android App兼容性测试，是一个比较重要的App评价内容 说到测试阶段，兼容性测试主要是对App在各类机型上的兼容、适配等情况进行测试。搞清楚这一阶段的测试 重点后，因此，Android App在进行兼容性测试前，一定要做好其前序测试内容，否则兼容性测试效果将会较 差。 1. 机型配置问题 Android兼容测试一定要做到宽范围覆盖，如果做不到这个，那么就违背了兼容性测试的目标——测试App在各 类机型、系统上的运行是否兼容、适配。 因此，兼容性测试必须要在各个机型、系统上对App进行运行、测.
WinCC 7.4 兼容性列表
03-01
详细介绍了WinCC 7.4的兼容性问题，建议安装软件前先查询兼容性是否满足。 详细介绍了WinCC 7.4的兼容性问题，建议安装软件前先查询兼容性是否满足。 详细介绍了WinCC 7.4的兼容性问题，建议安装软件前先查询兼容性...
APP兼容性专项测试
热门推荐
dou_being的博客
03-28 3万+
APP兼容性测试包含：新旧版本兼容测试、不同机型测试（系统兼容性、屏幕兼容性、分辨率兼容、尺寸兼容），具体如下： 一、新旧版本兼容性测试 新旧版本覆盖安装升级正常 新增功能，新旧版本覆盖安装后使用正常 二、不同机型测试 1.系统兼容性 iOS系统：iOS11.x、iOS12.x、iOS13.x、iOS14.x Android系统：Android5.x、Android6.x、Android7.x、Android8.x、Android9.x、Android10.x、Android11.x 2..
兼容性测试
漫步云端的博客
08-31 2076
备注：个人学习笔记整理，仅供测试同学学习，切莫转载商用，有错误或者更好的方案可以留言，一同进步！ 参考学习： https://www.cnblogs.com/uniquesnail/p/10622575.html 一：兼容性测试定义 兼容测试（Compatibility Test Suite），简称CTS，指对所设计程序与硬件、软件之间的兼容性的测试。 从软件测试角度来说可以理解为：被测软件在不同的硬件平台（PC、Mobile）、不同的软件（浏览器）、不同的操作系统平台...
浏览器兼容性测试工具
gzxdale的博客
05-28 2万+
相关连接：【浏览器兼容性概述】 一、浏览器兼容性测试工具 1.0、IETester【免费·exe】 这是我最先用的测试浏览器兼容性的工具，想必也是大家用的最多的一个，IETester是一个免费的Web浏览器调试工具,可以模拟出不同的js引擎来帮助程序员设计效果统一的代码。IETester可以在独立的标签页中开启IE5.5、IE6、IE7，IE8 beta2这4个不同版本的IE。可以方便的解决...
最全整理浏览器兼容性问题与解决方案
jiang7701037的博客
08-06 1万+
常见浏览器兼容性问题与解决方案 　　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 　　在学习浏览器兼容性之前，我想把前端开发人员划分为两类： 　　第一类是精...
兼容性研究
02-10
欢迎来到用户兼容性研究 :waving_hand: 我们想研究一个名为A的用户与另一个用户B的兼容性。我对计算两个用户特征向量之间的相似度很感兴趣：UserB（T1_B，T2_B）和OptUser（Rot（T1_A），-Rot（T2_A））。 我使用...
系统兼容性解决方案.doc
07-28
系统兼容性解决方案文档， 系统兼容性解决方案文档， 系统兼容性解决方案文档， 系统兼容性解决方案文档，
浅谈Html5移动端ios/Android兼容性总结
12-14
以前做pc端，也会遇到兼容性的问题，不过说实话，脑海里全是ie的问题，并没有什么可特别注意的，可能是我不善总结，现在做移动端（本来觉得移动端很easy，所以没放在眼里），so，我错了，我为自己的轻视高傲买单！...
浏览器兼容性问题处理
07-16
解决浏览器兼容性的常用方式，最终是否能解决问题，在于活学活用
asp.net下用服务器端代码解决浏览器兼容性问题
10-29
在你不厌其烦的搞浏览器兼容性问题的时候不妨试下这个方法任何一种网页编程语言都能实现,基于获取用户请求信息的判断浏览器类型
js日期对象兼容性的处理方法
10-26
本篇文章主要是对js日期对象兼容性的处理方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
原生javascript兼容性测试实例
10-27
原生javascript兼容性：currentStyle、scrollTop、event以及绑定事件IE的绑定事件为attachEvent/detachEvent等等兼容性测试实例,感兴趣的朋友可以参考下哈
浏览器兼容性测试模板
02-02
确定浏览器测试类型，需要关注的测试项目.确定浏览器测试类型，需要关注的测试项目
IE.JS解决IE兼容性问题方法汇总
09-25
正如标题所言它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示，下面为大家介绍下具体针对不同浏览器的调用方法，感兴趣的朋友可以参考下哈
关于css兼容性问题及一些常见问题汇总
09-24
下面小编就为大家带来一篇关于css兼容性问题及一些常见问题汇总。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧，祝大家游戏愉快哦
浅谈浏览器的兼容性(必看篇)
09-24
下面小编就为大家带来一篇浅谈浏览器的兼容性(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery解决浏览器兼容性问题案例分析
10-22
主要介绍了jQuery解决浏览器兼容性问题的方法,结合实例形式分析了针对不同浏览器的click事件响应兼容性问题,需要的朋友可以参考下
getusermedia 兼容性
最新发布
02-02
它的兼容性在不同的浏览器中有所不同。 在目前最新版本的主流浏览器中，包括谷歌Chrome、火狐Firefox、微软Edge和苹果Safari，都支持getUserMedia API。然而，在旧版本的浏览器中，特别是Internet Explorer，可能...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值