欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端开发的浏览器兼容性问题整理

程序员文章站 2022-04-22 16:07:40
...

前端开发初学之浏览器兼容性问题整理

HTML:

1.img 的 alt 属性在图片不存在的情况下,在各个浏览器的解析不一致

   在chrome、IE浏览器上显示为一张破损的图片,在 firfox上显示为alt的文字信息

2. ul 的内外边距问题

在IE6/IE7 中,ul标签有默认的外边距,在IE8以上及其他浏览器,ul 有默认的内边距
解决办法:

* {
	margin: 0;
	padding: 0;
}

IE6:

1. height 低的像素值无效问题

原因:IE6 容器默认行高的问题
解决办法:为高度过低元素,设置隐藏属性即可

overfloat: hidden;

2. 浮动时 margin 值变为双倍问题

	eg: 
		margin: 0 auto;
		float: left;

margin 的左右边距值实际表现为 20px,解决办法: 为浮动元素添加行内属性即可

		margin: 0 auto;
		float: left;
		display: inline;

3.max-width、min-width、max-height、min-height等属性不支持问题

解决办法:使用expression来实时获取元素当前适合宽高

max-width: 1280px;
_width: expression(documentElement.clientWidth > 1280 ? '1280px': 'auto');
min-width: 980px;
_width: expression(documentElement.clientWidth < 980? '980px': 'auto');
min-height:800px;_height:expression((documentElement.clientHeight || document.body.clientHeight) > 800 ? "800px" : "");
min-height:600px;_height:expression((documentElement.clientHeight || document.body.clientHeight) < 600 ? "600px" : "");

4. fixed属性值不支持问题

position: fixed;
top: 100px;
left: 100px;

解决办法:改悬浮效果为定位:

position:fixed;
_position:absolute;
top:100px;
_top:expression(documentElement.scrollTop + 100 + "px");
left:10px;

5. 定位元素 同时 使用 上下或左右时,只识别上与左问题

eg:

position: absolute;
top: 0;
left: 0;
right: 0:
bottom: 0;

解决办法: 为元素赋值宽高属性即可

width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;

多浏览器问题:

1. 浮动问题

子元素浮动导致父元素塌陷,清除浮动即可:

.clearfloat:after {
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfloat {
	zoom: 1;
}

2. 页面滚动时,悬浮元素发生抖动问题

可能原因: 浏览器性能消耗过大或网页上有动画等
解决办法: 给被旋转元素添加一个隐藏背面的属性

position: fixed;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

3. 图片的元素不能自适应垂直居中问题

eg:

<p>
	<i>
		<img src="" width="120" height="120" />
	</i>
</p>

解决办法:

p{
	width:800px;
	height:800px;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}
p img{
	position:static;
	+position:relative;
	top:-50%;left:-50%;
	vertical-align:middle;
}
p i{
	position:static;
	+position:absolute;
	top:50%;
}

今天笔记就到这哩!_

相关标签: 前端开发