常见的浏览器的兼容问题以及解决办法

最新推荐文章于 2024-03-03 16:30:00 发布

月亮打烊了か

最新推荐文章于 2024-03-03 16:30:00 发布

阅读量664

点赞数 2

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_41183785/article/details/104460077

版权

兼容问题是所有程序员都避免不了的问题，而浏览器的兼容更是让前端开发人员头疼和问题。由于现在市场上的浏览器众多，所有这里就介绍谷歌和ie7到ie11之间的兼容问题。

一、超链接里的图片在ie中出现边框问题

解决方法：给图片加border:0;或者border：none；

img{
	border:none;
}

二、表单元素距离顶部间距不一致

解决办法：给表单元素添加声明：float:left;

.heacd form input{
		float:left;
}

三、字体不一致(谷歌上显示微软雅黑 ie上显示别的字体)

解决办法：给body加上font-family属性。

body{
	font-family:微软雅黑;
}

ps:想设置字体都可以主要看你的需要来

四、谷歌浏览器最小字号支持到12px，12px以下的字号不支持

解决办法：第一种：直接切图用背景图嵌进去。（如果字比较少推荐这种方式）第二种：在html或者body里添加一句谷歌浏览器专有的属性 html,body{ -webkit-text-size-adjust:none; } 注意点：在新版本的谷歌浏览器里已经无效。第三种：CSS3的一个缩放属性（因为是CSS三的属性可能兼容性不太好）

	/*第二种方法*/
	html,body{
	-webkit-text-size-adjust:none;
	}
	/*第三种方式*/
	transfrom:scale();

五、谷歌和ie的透明度写法不一样

谷歌的透明度写法：opacity:value;(value的取值范围0-1;。ie的透明度写法：filter:alpha(opacity=value);取值范围 0-100(整数) 想要页面在ie和谷歌上都没问题就必须添加过滤器。
解决办法：添加过滤器。

/*给banner下的图片添加透明属性*/
。banner img{
		/*在谷歌*/
		opacity:0.8;
		/*在ie上*/
		filter：alpha(opacity=80);
}

注意：想要ie和谷歌都一样就需要在ie的写法上添加过滤器就好

六、margin-top的兼容问题

子元素没设置任何浮动，设置了margin-top属性后，会错误的把margin-top的属性值添加给父元素

解决办法：第一种：给子元素或者父元素设置浮动。第二种：给父元素添加上透明边框。第三种：给父元素添加overflow：hidden；（推荐）

<style type="text/css">
		.box{
			width: 400px;
			height: 400px;
			margin-left: 100px;
			background: skyblue;
			/*第三种解决办法*/
			overflow: hidden;
		}
		.box2{
		/*这里我给子元素添加了margin-top属性 效果是父元素下来 子元素没有下来*/
			margin-top: 50px;
			width: 200px;
			height: 200px;
			background: pink;
		}
	</style>
	</head>
	<body>
		<div class="box">
			<div class="box2">
			</div>
		</div>

ps:其余二种可以自行尝试。

七、在IE7或者IE6及以下版本中，部分块元素拥有默认高度（在16px左右）

解决办法：第一种：:给元素添加声明：font-size:0; （这里不太推荐大家使用元原因是这个设置也会让元素里面的字体的大小给改变了）。第二种：给元素添加声明：overflow:hidden;（推荐）
这里我用的块元素是li标签作为演示

<style type="text/css">
	body,ul{
		margin: 0;
		padding: 0;
	}
	/*box我没给宽高 给了黑色 在谷歌和其他浏览器上看不见颜色的*/
	.box{
		background: black;
	}
	/*我也没给宽高 颜色给的是天蓝色*/
	ul li{
		background: skyblue;
		list-style: none;
		/*解决办法*/
		overflow:hidde;
		hight:0;
	}
	</style>
	</head>
	<body>
		<div class="box"></div>
		<ul>
			<li></li>
		</ul>

下面是我在ie7上运行的界面可以看到 li标签的颜色就显现出来了
这是在ie7上运行的结果

八、双倍浮向（只有在ie6中）

当Ie6版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
解决办法：给浮动元素添加声明：display:inline;

这是在ie6上测试的可以看到第一个盒子的左边距很大这是因为浏览器将margin的值双倍的显示出来所以我们成这个现象为双倍浮向。
在这里插入图片描述
代码如下

	<style type="text/css">
	body{
		margin: 0;
		padding: 0;
	}
	/*我给最外层的元素浮动*/
	.box{
		width: 400px;
		height: 200px;
		margin-left: 100px;
		border: aqua solid 1px;
		margin-top: 100px;
		float: left;
	}
	/*给了浮动 以及和浮动方向一致的margin值*/
	.le{
		width: 100px;
		height: 100px;
		float: left;
		background: blanchedalmond;
		margin-left: 40px;
		/*解决办法*/
		display:inline;
	}
	/*给了浮动 以及和浮动方向一致的margin值*/
	.rl{
		width: 100px;
		height: 100px;
		float: left;
		margin-left: 40px;
		background: brown;
		/*解决办法*/
		display:inline;
	}

	</style>
	</head>
	<body>
		<div class="box">
			<div class="le"></div>
			<div class="rl"></div>
		</div>

月亮打烊了か

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
常见的浏览器的兼容问题以及解决办法

兼容问题是所有程序员都避免不了的问题，而浏览器的兼容更是让前端开发人员头疼和问题。由于现在市场上的浏览器众多，所有这里就介绍谷歌和ie7到ie11之间的兼容问题。一、超链接里的图片在ie中出现边框问题解决方法：给图片加border:0;或者border：none；img{ _border:none;}注意：下划线是过滤器(一般出现在调ie的兼容问题的时候用)二、表单元素距离顶...
复制链接

扫一扫