兼容性問題測試和解決方式

時間 2019-11-30

標籤兼容性問題解決方式简体版

原文原文鏈接

前端最困難的莫過於瀏覽器的兼容性問題，問題的困難主要在於：明明是一個正確的東西。在不一樣的瀏覽器面前，樣式上面的變得五花八門，這時你不得不去從正確的代碼裏面去尋找所謂的「錯誤」，可以這麼不負責任的說，錯誤的緣由不在於咱們自己，一切源於瀏覽器的差別性，然而，這些差別性，又不是咱們微小的力量所能解決的，因此，去解決兼容性問題對咱們而言已經成爲了一種潛在的任務。php

兼容性問題的本質緣由我以爲應該是瀏覽器在設計的時候沒有遵循一樣的規範，w3c的那套規範又有哪些瀏覽器全然遵循，都是各具特點。其次，在內核方面的不一樣trident，webkit,chrome,等。這些僅僅是主流瀏覽器的內核。好比。IE9下面的瀏覽器在新的規範和屬性方面作的不是很是好，出現的問題也就最大，而後是火狐，相對照較獨立。有的東西還要特地的給他設置，最後是google，相比前二者在兼容性方面作的應該是最好的了，但是問題的關鍵是：咱們沒法讓用戶去選擇瀏覽器！css

好比如下的一段代碼，打開凝視。當時就讓我很是鬱悶。無從下手。代碼無不論什麼錯誤。html

<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：在設計之初。儘量的使用傳統代碼解決。不建議使用較新的屬性和規範。web

2：針對不一樣的瀏覽器。對進行相應的錯誤和異常處理。chrome

3：在設計代碼的時候，對主流的瀏覽器進行全面的測試。特別是IE，IE沒問題，基本上其它的也就沒什麼問題。瀏覽器

4：最好一邊寫。一邊測試。不然，代碼量大。很是難找出問題所在。ide