標籤：style blog color width 問題 html
1.一個區塊層級元素，設定了float left or right，如果又對它設定水平margin值，如margin-left margin-right，在IE6下間距會比設的這個值大。
解決方案：該區塊層級元素加hack: _display:inline;
demo：
<!DOCTYPE html><html><head> <title></title> <style> *{ margin: 0; padding: 0; } #test{ width: 50px; height: 100px; background: red; float:left; margin-left: 10px; } #wrapper{ background: blue; width: 200px; height: 200px; margin-left: auto; margin-right: auto; } </style></head><body> <div id="wrapper"> <div id="test"></div> </div></body></html>
2. 一個元素設定高度為較小的高度(一般小於10px)，在ie8一下的瀏覽器展現的高度會高於設定的小高度。
解決方案：在這個元素上設定hack：*overflow:hidden。（或者*line-height:一個小於小高度的高度值，但我試了一個這個方法並不ok）
問題產生的原因是低端瀏覽器會給元素設定一個預設的line-height值。
<!DOCTYPE html><html><head> <title></title> <style> .demo{ width: 30px; height: 2px; background: red; *overflow: hidden; } </style></head><body><div class="demo"></div></body></html>
3.很多圖片排列在容器中，在不同的瀏覽器展示下會有不同的間隙。
解決方案：float
<!DOCTYPE html><html><head> <title>demo3</title> <style> img{ border: 1px solid gray; float:left; } </style></head><body> <div class="wrapper"> <img src="./image/img1.jpg"/> <img src="./image/img1.jpg"/> <img src="./image/img1.jpg"/> <img src="./image/img1.jpg"/> <img src="./image/img1.jpg"/> </div></body></html>
4.待續
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
