<img class="desc_img" src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=html&step_word=&pn=0&spn=0&di=87025285600&pi=&rn=1&tn=baid... ...
說到寫頁面,肯定有很多人在剛接觸編寫頁面這一塊時遇到很多細節和相容性的問題,那麼在這裡我總結一些經常遇到的小問題。希望能夠幫助學習頁面搭建的初學者!
雖然說ie6很多公司都已經拋棄,但是個人認為,初學者想要學好頁面的搭建,典型的相容性還是很有必要知道的!所以這裡我就先說ie6的一個經典的相容性問題!
ie6雙邊距問題
產生環境:當盒子外邊距方向和浮動方向相同,在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的盒子只使用了外邊距,並沒有浮動;
在高版本瀏覽器預覽的時,是沒有問題的,如下:
但是如果在ie6下,同時使用浮動和外邊距的盒子,並且方向相同的這個盒子就問出現雙倍邊距問題,如下:
這個就是雙倍邊距的問題!
解決辦法:
在出現問題的盒子上加 _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>
在其他瀏覽器中沒什麼問題,如下