兼容性问题測试和解决方式

前端最困难的莫过于浏览器的兼容性问题，问题的困难主要在于：明明是一个正确的东西。在不同的浏览器面前，样式上面的变得五花八门，这时你不得不去从正确的代码里面去寻找所谓的“错误”，能够这么不负责任的说，错误的原因不在于我们本身，一切源于浏览器的差异性，然而，这些差异性，又不是我们微小的力量所能解决的，所以，去解决兼容性问题对我们而言已经成为了一种潜在的任务。

兼容性问题的本质原因我觉得应该是浏览器在设计的时候没有遵循同样的规范，w3c的那套规范又有哪些浏览器全然遵循，都是各具特色。其次，在内核方面的不同trident，webkit,chrome,等。这些仅仅是主流浏览器的内核。比如。IE9下面的浏览器在新的规范和属性方面做的不是非常好，出现的问题也就最大，然后是火狐，相对照较独立。有的东西还要特意的给他设置，最后是google，相比前两者在兼容性方面做的应该是最好的了，可是问题的关键是：我们无法让用户去选择浏览器！

比如以下的一段代码，打开凝视。当时就让我非常郁闷。无从下手。代码无不论什么错误。

<body class="empManage_body">
		<div class="empManage_div_1">
			<h1 class="empManage_h1">雇员管理系统</h1>
		<!--<marquee behavior ="slide" direction = "up" scrollAmount="28">-->
		<!-- 注： 再设计滑动的时候除了google浏览器正确显示样式，其余的如IE火狐均出现严重的兼容性问题
		所以。採用了向左滑动的方式。去除背景图片的方式 -->
			<table class="empManage_table_1">
				<tr class="empManage_table_1_tr_1">
					<td>
						<marquee behavior ="slide" direction = "left" scrollAmount="16">
							<a href="empList.php" class="empManage_a_1">管理用户</a>
						</marquee>
					</td>
				</tr>
				<tr class="empManage_table_1_tr_2">
					<td>
						<marquee behavior ="slide" direction = "left" scrollAmount="13">
							<a href="#???" class="empManage_a_2">加入用户</a>
						</marquee>
					</td>
				</tr>
				<tr class="empManage_table_1_tr_3">
					<td>
						<marquee behavior ="slide" direction = "left" scrollAmount="10">
							<a href="#???" class="empManage_a_3">查询用户</a>
						</marquee>
					</td>
				</tr>
				<tr class="empManage_table_1_tr_4">
					<td>
						<marquee behavior ="slide" direction = "left" scrollAmount="7">
							<a href="login.php" class="empManage_a_4">退出系统</a>
						</marquee>
					</td>
				</tr>
			</table>
		<!--</marquee>-->
		</div>

外部的css文件：

.empManage_body{
	background-color: #507FD2;
	/*background-image: url(../picture/center.jpg);
	background-size: 200px 350px;/*背景大小*/
	/*background-position:566px  158px;/*背景位置*/
	/*background-repeat: no-repeat;*/
	
}
.empManage_h1{
	margin-left: 150px;
}
.empManage_div_1{
	margin-left: 420px;
	width: 500px;
	height: 500px;
	background: red;
	
}
.empManage_table_1{
	postion: relative;
	margin-left: 180px;
	margin-top: 80px;
	width: 150px;
	height: 300px;
	font-family: 隶书;
	font-size: 33px;
}

.empManage_a_1{
	color: black;
}
.empManage_a_2{
	color: black;
}
.empManage_a_3{
	color: black;
}
.empManage_a_4{
	color: black;
}

解决兼容性问题的方案例如以下：

1：在设计之初。尽可能的使用传统代码解决。不建议使用较新的属性和规范。

2：针对不同的浏览器。对进行相应的错误和异常处理。

3：在设计代码的时候，对主流的浏览器进行全面的測试。特别是IE，IE没问题，基本上其它的也就没什么问题。

4：最好一边写。一边測试。否则，代码量大。非常难找出问题所在。

posted @ 2017-06-19 16:39 llguanli 阅读(237) 评论(0) 收藏举报

刷新页面返回顶部