標籤：邊框 charset 目的 不能 rest nbsp xhtml blog mil
瀏覽器的相容問題
1.瀏覽器核心：
Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Safari ( WebKit )
Google Chrome ( WebKit )
2.css hack
解決瀏覽器安全色的主要方法是css hack
由於不同的瀏覽器對CSS的支援及解析結果不一樣，還由於CSS中的優先順序的關係。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。
|
|
IE6 |
IE7 |
IE8 |
Firefox |
Opera |
Safari |
|
!important |
|
Y |
Y |
Y |
Y |
Y |
|
_ |
Y |
|
|
|
|
|
|
* |
Y |
Y |
|
|
|
|
|
*+ |
|
Y |
|
|
|
|
|
\9 |
Y |
Y |
Y |
|
|
|
|
\0 |
|
|
Y |
|
|
|
|
nth-of-type(1) |
|
|
|
|
Y |
Y |
如何解決瀏覽器的相容性
在head標籤中加入meta 類型<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，這樣就解決了ie7、ie8相容問題。現在剩下ie6、ie7、Firefox、Chrome(Safari與Chrome使用同一核心)、Opera這幾種瀏覽器的相容性問題，我們需要使用CSS Hack來解決該問題。代碼如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>瀏覽器安全色性問題</title>
<style type="text/css">
.t1
{
color:#000000; /* 所有瀏覽器都支援 此處填寫Firefox的css*/
*color:#0000FF; /* ie6 id7 支援 此處填寫ie7的css*/
_color:#66CCCC; /* ie6支援 此處填寫ie6的css*/
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{ .t1{color:#9900FF}} /* oprea支援 此處填寫oprea的css*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.t1{color:#336600}/* Chrome、Safari支援 此處填寫Chrome的css*/
}
</style>
</head>
<body>
<div class="t1">ff、ie8、ie7、ie6、oprea、Safari相容性css 書寫入模式<br>
.t1{
color:#000000; /* 所有瀏覽器都支援 此處填寫Firefox的css**/<br>
*color:#0000FF; /* ie6 id7 支援 此處填寫ie7的css*/<br>
_color:#66CCCC; /* ie6支援 此處填寫ie6的css*/<br>
}<br>
/* oprea支援此處填寫oprea的css*/<br>
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)<br>
{ .t1{color:#CC66FF}}<br>
/* Chrome、Safari支援 此處填寫Chrome的css*/<br>
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.t1{color:#336600}}
}
</div>
</div>
</body>
</html>
1. 預設的內外邊距不同
問題：
各個瀏覽器預設的內外邊距不同
解決：
*{margin:0;padding:0;}
2. 水平置中的問題
問題：
設定 text-align: center
ie6-7文本置中，嵌套的塊元素也會置中
ff /opera /safari /ie8文本會置中，嵌套塊不會置中
解決：
塊元素設定
1、margin-left:auto;margin-right:auto
2、margin:0 auto;
3、<div align=”center”></div>
3. 垂直置中的問題
問題：
在瀏覽器中 想要垂直置中，設定vertical-align:middle; 不起作用。例如：ie6下文本與文本輸入框對不齊，需設定vertical-align:middle1，但是文字框的內容不會垂直置中
解決：
給容器設定一個與其高度相同的行高
line-height:與容器的height一樣
4. 關於高度問題
問題：
如果是動態地新增內容，高度最好不要定義。瀏覽器可以自動調整，然而如果是靜態內容，高度最好定好。
如果設定了高度，內容過多時，ie6下會自動增加高度、其他瀏覽器會超出邊框
解決：
1.設定overflow:hidden;
2.高度自增height:auto!important;height:100px;
5. IE6 預設的div高度
問題：
ie6預設div高度為一個字型顯示的高度，所在ie6下div的高度大於等於一個字的高度，因此在ie6下定義高度為1px的容器，顯示的是一個字型的高度
解決：
為這個容器設定下列屬性之一
1、設定overflow:hidden;
2、設定line-height:1px;
3、設定zoom:0.08
6. IE6 最小高度(寬度)的問題
問題：
ie6不支援min-height、min-width屬性，預設height是最小高度，width是最小寬度。
解決：
使用ie6不支援但其餘瀏覽器支援的屬性!important。
設定屬性min-height:200px; height:auto !important; height:200px;
7. td高度的問題
問題：
table中td的寬度都不包含border的寬度，但是oprea和ff中td的高度包含了border的高度
解決：
設定line-height和height一樣。在ie中如果td中的沒有內容，那麼border將不會顯示
8. div嵌套p時，出現空白行
問題：
div中顯示<p>文本</p>，ff、oprea、Chrome：top和bottom都會出現空白行，但是在ie下不會出現空白行。
解決：
設定p的margin:0px，再設定div的padding-top和padding-bottom
9. IE6-7圖片下面有空隙的問題
問題：
塊元素中含有圖片時，ie6-7中會出現圖片下有空隙
解決：
1、在原始碼中讓</div>和<img>在同一行
2、將圖片轉換為塊級對象display:block;
3、設定圖片的垂直對齊 vertical-align:top/middle/bottom
4、改變父物件的屬性，如果父物件的寬、高固定，圖片大小隨父物件而定，那麼可以對父元素設定： overflow:hidden;
5、設定圖片的浮動屬性 float:left;
10. IE6雙倍邊距的問題
問題：
ie6中設定浮動，同時又設定margin時，會出現雙倍邊距的問題
例float:left;width:100px;margin:0 100px;
解決：
設定display:inline;
10. IE6雙倍邊距的問題
問題：
ie6中設定浮動，同時又設定margin時，會出現雙倍邊距的問題
例float:left;width:100px;margin:0 100px;
解決：
設定display:inline;
12. IE6兩個層之間3px的問題
問題：
左邊層採用浮動，右邊沒有採用浮動，這時在ie6中兩層之間就會產生3像素的間距
解決：
1、右邊層也採用浮動 float
2、左邊層添加屬性 margin-right:-3px;
13. IE6 子項目絕對位置的問題
問題：
父級元素使用padding後，子項目使用絕對位置，不能精確定位
解決：
在子項目中設定 _left:-20px; _top:-1px;
14. 顯示手型cursor:hand
問題：
ie6/7/8、opera 都支援 但是safari 、 ff 不支援
解決：
寫成 cursor:pointer; (所有瀏覽器都能識別)
15. IE6-7 line-height失效的問題
問題：
在ie中img與文字放一起時， line-height不起作用
解決：
都設定成float
16. td自動換行的問題
問題：
Table寬度固定，td自動換行
解決：
設定Table的table-layout:fixed，td的word-wrap:break-word
18. 透明png圖片會帶背景色
問題：
在ie6下透明的png圖片會帶一個背景色
解決：
background-image: url(icon_home.png);/* 其他瀏覽器 */
background-repeat: no-repeat;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘icon_home.png‘); /* IE6 */
_background-image: none; /* IE6 */
23. ul或li浮動後，顯示在div外
問題：
div中的ul或li設定float以後，都不在div中
解決：
必須在ul標籤後加<div style="clear:both"></div>來閉合外層div
32. li中的內容以省略符號顯示
問題：
li中內容超過長度時，想以省略符號顯示， 此方法適用於ie6-7-8、opera、safari瀏覽器
ff瀏覽器不支援
解決：
li{width:200px; white-space:nowrap;text-overflow:ellipsis;
-o-text-overflow:ellipsis; overflow: hidden; }
35. 除去捲軸的問題
問題：
隱藏捲軸
解決：
1、只有ie6-7支援<body scroll="no">
2、除ie6-7不支援 body{overflow:hidden}
3、所有瀏覽器 html{overflow:hidden}
41. ff、chrome絕對位置無效
問題：
在IE給td設定position:relative，然後給它包含的一個容器使用position:absolute進行定位是有效，但在FF和Chrome下卻不可以。
解決：
設定td的display:block。
42. IE6 絕對位置的問題
問題：
<div style="position:relative;border:1px solid orange;text-align:center;">
<div style="position:absolute;top:0;left:0;
background:#CCC;">dovapour</div>
<a href="#" title="vapour的blog">內容</a>
</div>
解決：
left的定位錯誤問題
1、給父層設定zoom:1觸發layout。
2、給父層設定寬度width
bottom的定位錯誤問題
1、給父層設定zoom:1觸發layout。
2、給父層設定高度height
3. 子容器寬度大於父容器寬度時，內容超出
問題：
子DIV的寬度和父DIV的寬度都已經定義，在IE6中如果其子DIV的寬度大於父DIV的寬度，父DIV的寬度將會被擴充，在其他瀏覽器中父DIV的寬度將不會擴充，子DIV將超出父DIV
解決：
設定overflow:hidden，子DIV將不會超出父DIV。
12、設定捲軸顏色 只對ie系列有效 在html中 而不是設定body
<style type="text/css">
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
</style>
IE不支援float：inherit overflow:hidden有2個用法，一個是隱藏溢出，另一個是清除浮動。
<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素
<body oncontextmenu="return false" ondragstart="return false" tstart="return false" scroll="auto">
這行代碼放在body中，去掉了頁面滑鼠右鍵捷徑功能表，達到防止圖片另存新檔的目的。
關於瀏覽器安全色問題及hack寫法
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
