編寫html頁面時常見的問題（一）

時間 2019-11-12

標籤編寫 html 頁面常見的問題欄目 HTML 简体版

原文原文鏈接

說到寫頁面，確定有不少人在剛接觸編寫頁面這一塊時遇到不少細節和兼容性的問題，那麼在這裏我總結一些常常遇到的小問題。但願可以幫助學習頁面搭建的初學者！css

雖說ie6不少公司都已經拋棄，可是我的認爲，初學者想要學好頁面的搭建，典型的兼容性仍是頗有必要知道的！因此這裏我就先說ie6的一個經典的兼容性問題！html

ie6雙邊距問題 chrome

產生環境：當盒子外邊距方向和浮動方向相同，在ie6瀏覽器中，必定會出現雙倍邊距問題瀏覽器

例如：css以下佈局

<style type="text/css">

	.chrome,.ie{width:100px;height:100px;background:pink;}
	.ie{float:left;margin-left:100px;}
	.chrome{margin-left:100px;}
	.clearfix{clear:both;}
</style>

html以下學習

<body>
	<div style="margin:20px 0 0 20px;background:#ccc;height:500px;">
    	<div class="ie">ie6</div>
    <div class="clearfix"></div>
    <div class="chrome">高版本</div>
    </div>
</body>

以上：類名爲.ie的盒子不只左浮動了，並且還使用左邊的外邊距；可是類名爲.chrome的盒子只使用了外邊距，並無浮動；spa

在高版本瀏覽器預覽的時，是沒有問題的，以下：htm

可是若是在ie6下，同時使用浮動和外邊距的盒子，而且方向相同的這個盒子就問出現雙倍邊距問題，以下：blog

這個就是雙倍邊距的問題！圖片

解決辦法：

在出現問題的盒子上加 _display:inline;這個屬性，屬性前面加上下劃線，表示的是隻有ie6去識別這個屬性。

接下來就說說在ie瀏覽器中，一張圖片假設有超級連接的話，在ie中顯示的樣式！

圖片連接在ie中有邊框

產生環境：給圖片添加超級連接，而且有href屬性

例如：一張圖片不加超連接，一張圖片加了超連接

<body>
<img src="1.jpg" width="230" height="225" />
<a href="#" class="chrome"><img src="1.jpg" width="230" height="225" /></a>
</body>

在其餘瀏覽器中沒什麼問題，以下

可是在ie中，有超連接的圖片就有問題了，以下

解決辦法：

給img增長border:0;或者border:none;屬性

固然，ie瀏覽器的兼容性愈來愈好了，因此在 win10中的 Microsoft edge 不存在這種問題！

接下來再說說一個在寫頁面時也是比較常見的一個問題，外邊距塌陷的問題！

外邊距塌陷的問題

產生環境：兩個盒子嵌套會發生外邊距塌陷

有時候，咱們在搭建頁面的時候，想要經過外邊距margin-top來拉開內盒子與外盒子的距離，可是發現總會使內外兩個盒子一塊兒生效；

例如：本來父盒子與子盒子頂部緊挨着

如今要將紅盒子距離父盒子距離頂部50px,紅盒子（子級）使用margin-top以後，兩個盒子一塊兒掉下來了

這個就是外邊距塌陷問題

解決辦法：

一、給父級添加屬性：overflow:hidden;(推薦使用)

二、給父級或子級添加浮動（有時候佈局的搭建中，也是須要子級浮動，好比左右佈局，這個時候就不存在外邊距塌陷問題了）

三、給父級添加border屬性（不推薦使用，由於咱們的盒子不少時候是不須要邊框這個樣式的）

但願可以幫助初學者，同時也但願大神多多指教，還有一些問題沒來得及分享，其餘的會盡快補上的哦！我從最基礎的記錄開始！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。