WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【02】

最新推荐文章于 2023-11-28 19:51:01 发布

Java仗剑走天涯

最新推荐文章于 2023-11-28 19:51:01 发布

阅读量2.8k

点赞数

分类专栏：前端基础HTML5/CSS3 文章标签：浏览器兼容性 css样式 css样式兼容问题

本文链接：https://blog.csdn.net/baidu_37107022/article/details/71973570

版权

#兼容问题目录
8、IE6不支持固定定位
9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙
10、IE6下双边距问题
11、IE67下父级有边框，子级有margin的话会不起作用
12、IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效（IE7不管相差多少，直接失效）
13、IE6下元素中除了文字之外，还有inline-block类型元素，元素的行高会失效
14、IE6下文字溢出的问题
15、IE67li间隙问题

后续兼容性问题处理链接地址

http://blog.csdn.net/baidu_37107022/article/details/71972223

http://blog.csdn.net/baidu_37107022/article/details/71977053

#8、IE6不支持固定定位

可以用js来解决

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				height: 3000px;
			}
			div{
				width: 100px;
				height: 100px;
				background: red;
				/*position: fixed;
				right: 0;
				bottom: 0;*/
				
				position: absolute;
				right: 0;
				top: 0;
			}
		</style>
		<script>
			window.function(){
				var div1=document.getElementById("div1");
				
				window.onscroll=function(){
					var top=document.documentElement.scrollTop||document.body.scrollTop;
					var bottomPos=document.documentElement.clientHeight-div1.offsetHeight;
					
					div1.style.top=top+bottomPos+'px';
				}
			};
		</script>
	</head>
	<body>
		<!--
			IE6不支持固定定位，可以用js来解决
		-->
		<div id="div1">kaivon</div>
	</body>
</html>

#9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙

最低0.47元/天解锁文章

Java仗剑走天涯

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【02】

兼容问题目录8、IE6不支持固定定位 8、IE6不支持固定定位9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙10、IE6下双边距问题11、IE67下父级有边框，子级有margin的话会不起作用12、IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效（IE7不管相差多少，直接失效）13、IE6下元素中除了文字之外，还有inline-block类型元素
复制链接

扫一扫