2. 程式人生 > >Html和CSS在瀏覽器中常見的相容性問題處理

Html和CSS在瀏覽器中常見的相容性問題處理

阿新 • • 發佈：2018-11-17

1，居中問題
 

格里的內容，IE預設為居中，而FF預設為左對齊，可以嘗試增加程式碼：

	margin: 0 auto;

2，高度問題

兩上下排列或巢狀的格，上面的格設定高度（高度），如果DIV裡的實際內容大於所設高度，在FF中會出現兩個格重疊的現象;但在IE中，下面的格會自動給上面的div讓出空間所以為避免出現層的重疊，高度一定要控制恰當，或者乾脆不寫高度，讓他自動調節，比較好的方法是身高：100％;但當這個div裡面一級的元素都浮了的時候，則需要在格塊的最後，閉和前加一個沉底的空DIV，CSS對應是：

.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3，明確：兩者;
 

不想受到浮動浮動的，就在格中寫入明確：兩者;
 

4，IE浮動邊緣產生的雙倍距離

#box {

        float:left;
        width:100px;
        margin:0 0 0 100px; //這種情況之下IE會產生200px的距離
        display:inline; //使浮動忽略
}

5，填充問題
 

FF設定填充後，div會增加高度和寬度，但IE不會（*標準的XHTML1.0定義dtd好像一致了）高度控制恰當，或嘗試使用高度：100％;寬度減少使用padding但根據實際經驗，一般FF和IE的填充不會有太大區別，div的實際寬=寬度+填充，所以div寫全寬和填充，寬度用實際想要的寬減去填充定義。
 

6，div巢狀時y軸上padding和marign的問題
 

FF裡y軸上子div到父div的距離為父padding +子marign

IE裡y軸上子div到父div的距離為父padding和子marign裡大的一個

FF裡y軸上父padding = 0且border = 0時，子div到父div的距離為0，子marign作用到父div外面
 

7，填充，marign，高度，寬度的傻瓜式解決技巧
 

注意是技巧，不是方法：

寫好標準頭

    <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    <html xmlns =“http://www.w3.org/1999/xhtml”>

    高儘量用填充，慎用餘量，高度儘量補上100％，父級高度有定值子級高度不用100％，子級全為浮動時底部補個空明確：兩者的格寬儘量用餘量，慎用填充物，寬度算準實際要的減去填充
 

8，列表類
 

1. ul標籤在FF中預設是有padding值的，而在IE中只有margin有值

先定義ul {margin：0; padding：0;}

2. ul和ol列表縮排問題消除ul，ol等列表的縮排時，樣式應寫成：{list-style：none; margin：0px; padding：0px;}
 

9，顯示類（顯示：塊，內聯）
 

1.顯示：塊，內聯兩個元素

    顯示：塊; //可以為內嵌元素模擬為塊元素

    顯示：內聯; //實現同一行排列的的效果

    顯示：表; //對於FF，模擬表的效果

    display：塊塊元素，元素的特點是：

    總是在新行上開始;高度，行高以及頂和底邊距都可控制;寬度預設是它的容器的100％，除非設定一個寬度

    <div>，<p>，<h1>，<form>，<ul>和<li>是塊元素的例子

    display：inline就是將元素顯示為行內元素，元素的特點是：和其他元素都在一行上;高，行高及頂和底邊距不可改變;寬度就是它的文字或圖片的寬度，不可改變。 <span>，<a>，<label>，<input>，<img>，<strong>和<em>是內聯元素的例子

2.滑鼠手指狀顯示

       全部用標準的寫法遊標：指標;
 

10，背景，圖片類
 

1. background顯示問題

       全部注意補齊width，height屬性

2.背景透明問題

    IE：filter：progid：DXImageTransform.Microsoft.Alpha（style = 0，opacity = 60）;

    IE：filter：alpha（opacity = 10）;

    FF：不透明度：0.6;

    FF：-moz-opacity：0.10;

    最好兩個都寫，並將透明度屬性放在下面
 

11，最小高度最小高度的實現（相容IE6，IE7，FF）
 

作用是：當容器的內容較少時，能保持一個最小的高度，以免破壞了佈局或UI設計效果而當容器內的內容增加的時候，容器能夠自動的伸展以適應內容的變化。

#mrjin {
               background:#ccc;
               min-height:100px;
               height:auto
 !important;
                height:100px;
               overflow:visible;
}

 

12，著名的Meyer Reset（重置）

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6，p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

 :focus {
	outline: 0;
}

body {
	line-height: 1;
	color: black;
	background: white;
}

ol,
ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption,
th,
td {
	text-align: left;
	font-weight: normal;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}


 

 

13，跨瀏覽器的CSS透明度
 

.transparent {

  opacity: 0.7;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

  filter: alpha(opacity=70);

  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;

14，文字陰影（CSS3）
 

.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }


 

15，盒陰影（CSS3）
 

.box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }


 

16，Sticky Footer（讓頁尾永遠停靠在頁面底部，而不是根據絕對位置）

<div id="wrap">

  <div id="main" class="clearfix"></div>

</div>

   <div id="footer"> </div>


 CSS部分：

* {
	margin: 0;
	padding: 0;
}

html,
body,
#wrap {
	height: 100%;
}

body>#wrap {
	height: auto;
	min-height: 100%;
}

#main {
	padding-bottom: 150px;
}

#footer {
	position: relative;
	margin-top: -150px;
	height: 150px;
	clear: both;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

17，IFRAME元素內嵌頁面如何去掉繼承的HTML及體背景色/背景圖片 

IFRAME元素的功能是在一個文件裡內嵌一個文件，建立一個浮動的幀。內嵌文件時一個完整的頁面，有HTML，BODY等屬性。這樣遇到了一個問題，如果樣式表中對BODY定義過背景色/背景圖片，那麼內嵌文件將全部繼承過來所以如何去掉背景色和背景圖片。：

【1】去掉背景色：過濾器：色度（顏色=白色）;

舉例：<iframe width =“100％”height =“400”marginwidth =“0”marginheight =“0”scrolling =“no”frameborder =“0”leftmargin =“0”topmargin =“0”style =“filter：色度（顏色=白色）;” > </ IFRAME>

【2】去掉背景圖片：

舉例：<iframe width =“100％”height =“400”marginwidth =“0”marginheight =“0”scrolling =“no”frameborder =“0”leftmargin =“0”topmargin =“0”style =“filter：色度（顏色=白色）;” allowTransparency =“true”> </ iframe>

注意：內嵌頁面同時也要增加BODY屬性：

<body bgcolor =“transparent”style ='background：transparent'>
 

18，為什麼網路標準中無法設定IE瀏覽器滾動條顏色了？

body {
	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;
}

 

原來樣式設定：

解決辦法是將車身換成HTML。
 

19，為什麼中火狐瀏覽器下文字無法撐開容器的高度？
 標準瀏覽器中固定高度值的容器是不會象IE6裡那樣被撐開的，那我又想固定高度，又想能被撐開需要怎樣設定呢辦法就是去掉高度設定最小高度：200畫素; 這裡為了照顧不認識min-height的IE6可以這樣定義：

div { height:auto!important; height:200px; min-height:200px; }


20，如何定義1px的左右高度的容器？
 

 IE6下這個問題是因為預設的行高造成的，解決的方法也有很多，例如：overflow：hidden | zoom：0.08 | 行高：1px的

21，怎麼樣才能讓層顯示在FLASH之上呢？
 

解決的辦法是給FLASH設定透明：

<a href=" http://www.chinaz.com/">：</ a >

<pre lang =“html”line =“1”>

<param name =“wmode”value =“transparent”/>
 

22，怎樣使一個DIV層居中於瀏覽器中？
 

首先，需要這兩個層都是兄弟關係，其次，這兩個層都需要絕對定位舉個例子：

div {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -100px;
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

23，怎樣使DIV背景透明？
 

body {
	font: normal 12px/30px Verdana;
}

#test {
	position: relative;
	width: 400px;
	height: 50px;
}

#inner {
	z-index: 2;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 380px;
	height: 30px;
	color: #003;
	font-weight: bold;
	text-align: center;
}

#transbox {
	z-index: 1;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 400px;
	height: 50px;
	background: #eef;
	border: 1px solid #a00;
	filter: alpha(opacity=40);
	-moz-opacity: 0.4;
	opacity: 0.4;
}

<P>這裡很多的文字，這裡很多的文字，這裡很多的文字，這裡很多的文字，</ P>

 

24，怎樣去掉選中時的虛線框？
 

利用onfocus =“this.blur（）;”例如：<a href="#" onfocus="this.blur();">測試</a>
 

25，IE6下PNG背景顯示問題？
 

針對IE6下PNG背景顯示問題，CSS中可以這樣解決：

_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http: //www.0351zhuangxiu.com/uploads/images/bj.jpg’);

26，文字與表單對齊方法？
 

設定表單元素第一字型為Tahoma（Verdana系列也可），並設定vertical-align：middle。建設大家把這個約定寫入CSS RESET中，能減小很多麻煩：

body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}

27，OPTGROUP標籤的用法？
 

OPTGROUP標籤，鮮為人知，它對提升選擇表單使用者體驗很有幫助就是可以在有很多選項時，對這些選項分組：例子：

<select id =“selectId”>

<optgroup label =“GROUP ONE”>

<option value =“1”>一個選擇</ option>

<option value =“2”>兩個選擇</ option>

</ OPTGROUP>

<optgroup label =“GROUP TWO”>

<option value =“3”>三選</ option>

<option value =“4”>四選</ option>

</ OPTGROUP>

</選擇>
 

28，文字與圖片垂直居中對齊方法？
 

為圖片與文字的共同父元素所有的後代元素定義* {垂直對齊：中間};例如：

<p>我要的堅強<img src =“i / image.gif”/> </ p>

只需定義P * {垂直對齊：中間}即可使文字與圖片同行垂直居中。
 

29，文章標題列表中日期居右顯示的兩種方法？
 

方法甲相對方法乙省資源，但比方法乙要多寫兩句程式碼，使用時請視情況而定：

方法一：

    <P>這是文章標題<跨度> 2010-10-10 </跨度> </ p>

然後定義p和跨度的樣式：

p {position：relative}

p span {position：absolute; 右：0}

方法B：

<P> <跨度> 2010-10-10 </跨度>這是文章標題</ P>

然後定義跨度右浮動：

p span {float：right}
 

30，IE6下最大/最小寬度/高度實現？
 

ie6下max / min-width / height實現，_ width：expression_r（this.width> 600？“600px”：true）;, height同理。
 

31，空白外邊距互相疊加的問題？
 

一般通過新增透明邊框或者1px的的內邊距避免;

其一，為外圍元素定義透明邊框。具體到本例，即在樣式div中加入border：1px solid transparent;

其二，為外圍元素定義內邊距填充..具體到本例，即在樣式的div中加入填充：1px的;

例如：<！doctype html>

<HTML>

<HEAD>

<meta charset =“utf-8”>

<title>空白邊距疊加[email protected] </ title >

<風格>

體{寬度：300畫素; FONT-FAMILY： '微軟雅黑'; 字型大小：1em的; TEXT-INDENT：10px的; 行高：1.25}

DIV {背景：＃a40000;餘量：10px的}

div p {background：#eee; margin：15px}

</樣式>

</ HEAD>

<BODY>

<div> <p>空白邊距疊加[email protected] </ p> </ div >

</ BODY>

</ HTML>
 

32，網頁設計中的預設字型
 

字型：12px / 1.5 Tahoma，Helvetica，Arial，sans-serif;

說明：line-height採用1.5，也就是18px。這是淘寶視覺規範中定義的行高，對於12px的字型，這個行高看起來很舒服.font家族預設採用宋體。宋體是英文的Windows作業系統的預設字型，這個字型比較均衡，顯示中英文混排很不錯，是經久耐看的一款字型。
 

33，瀏覽器相容 - 常用的css hack

/*第一種*/

.title {
	height: 200px;
	*height: 200px;
	_height: 200px;
}


/*第二種*/

.title {
	height: 200px;
	*height: 200px !important;
	*height: 200px;
}


/*第三種*/

.title {
	height: 200px;
}

*html.title {
	height: 200px;
}

*+html.title {
	height: 200px;
}


 

 轉載於文章（Chick here!）

相關推薦

Html和CSS在瀏覽器中常見的相容性問題處理

1，居中問題   格里的內容，IE預設為居中，而FF預設為左對齊，可以嘗試增加程式碼： margin: 0 auto; 2，高度問題 兩上下排列或巢狀的格，上面的格設定高度（高度），如果DIV裡的實際內容大於所設高度，在FF中會出現兩個格重疊的現象;

HTML和CSS中如何判斷ie各版本瀏覽器

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

HTML和CSS在IE7中常見的兼容性問題

針對 display css bottom ati posit lin 性問題 兼容性問題 IE7及以下版本都會有這些問題 1.IE7塊轉內聯塊問題 　　問題描述：好像塊轉內聯塊失敗，依然不在一行排列 　　解決辦法：給元素添加如下css *display:inl

HTML和CSS中的居中效果（1）

htm inner height overflow n-1 txt posit splay read HTML和CSS中的居中效果 單行上下左右居中 Html: <div class=”container”></div> CSS:

第59節:Java中的html和css語言

歡迎到我的簡書檢視我的文集 前言: HTML 英文: HyperText Markup Language內容 html是超文字標記語言,是網頁語言的基礎知識,html是通過標籤來定義的語言,所有程式碼都是由標籤所組成的,在html程式碼中不用區分大小寫. <!DOCTYPE htm

編寫HTML和CSS的前端開發中不一定熟悉JavaScript

作為前端開發人員，HTML、css、JavaScript是必備的知識技能，但是現實工作工作中並非所有的前端都知道JavaScript，根據外國一個網站的匿名調查發現，有17%的開發人員不知道JavaScript，只有51% 的開發人員熟悉JavaScript。其實前端開發最主要的動態開發就是Java

html 和css 中 遇到的問題

ffffff html col spa str clas ont tro 自適應 一、如何用一張圖片做背景圖，並且圖片自適應div的大小 background: url("../stu_wengu.png") center center no-repeat; back

html和css中浮動清除之解決高度塌陷

我們知道網頁的佈局有兩大利器，“浮動”和“定位”。而浮動和定位都不離開div，所以可以清楚理解應用div盒子模型對網頁製作來說及其及其重要。 盒子模型： 浮動：浮動對應這網頁三大排版中的浮動排版（其他兩個是標準排版、定位排版）（css3中還增加了一些新的排版模型

十八哥視訊教程中html和css的tips

9、盒模型：把div當成一個盒子來看待，盒子與盒子直接的距離叫margin（外邊距），盒子壁的厚度叫bord（邊框），盒子壁與內容物之間的距離叫padding（內邊距），裡面放的東西叫做content（內容物）；

啟動 nohup storm和 在瀏覽器中輸入ip:8080/index.html進入storm UI介面（注意埠不一定是8080，注意配置）

在啟動storm之前要確保nimbus和supervisor上的Zookeeper已經啟動 （1）檢視zk的狀態：./zkServer.sh status 12（2）如果zk沒有開啟，將nimbus和supervisor的zk開啟./zkServer.sh start1（3）

html 和css常見的面試題

1、常見的塊級元素  內聯元素 div -最常用的塊級元素      dl - 和dt-dd 搭配使用的塊級元素      form - 互動表單      h1 -h6- 大標題      hr - 水平分隔線      ol – 有序列表      p - 段落      ul - 無序列表    

html和css面試題

相對 列表標記 格式 erl sam ext 第一個 onos static 21.如何居中div,如何居中一個浮動元素? 給div設置一個寬度，然後添加margin:0 auto屬性 div{ width:200px; margin

史上最全Html和CSS布局技巧

喜歡 輸出 隔離 init scale ext med 兩種 float 單列布局水平居中 水平居中的頁面布局中最為常見的一種布局形式，多出現於標題，以及內容區域的組織形式，下面介紹四種實現水平居中的方法（註：下面各個實例中實現的是child元素的對齊操作，child元素的

html和css（一）

ctrl+ css ron 超文本 strong 式表 外觀 說明 更多 簡單點來說html和css就是一起連在使用，有了html和css會使網頁更加有活力，看起來更加的好看。 html是做關於網頁標簽這一塊相當於骨架，更深的還需要另一個來完成，那就是css，相當於向裏面加

HTML和CSS疑點解析

字母 lin white 不換行 enter 不定 浮動 color bsp 1,讓不定寬高的div,垂直水平居中? 父盒子:display:table-cell;text-align:center;vertical-align:middle div盒子:display:i

接觸HTML和CSS心得體會

樣式 表現 user 顏色 組成 標記 word put 文件中 1.HTML 它負責網頁的三個要素之中的結構； HTML使用標簽的形式來標識網頁中的不同組成部分 <!DOCTYPE html> <html> <head>

瀏覽器中常見網絡協議介紹

響應 網絡 ebs 優化 system 目標 其他 有序 ipv 本周五我在公司有一個關於《HTTP 協議》的培訓，只有兩個小時，估計能講到的東西不會太多。實際上，瀏覽器為了完成 WEB 應用的各項功能，需要跟各種網絡協議打交道，HTTP 只是其中一種。本文會介紹瀏覽器中常

前端面試html和css

結構 意義 phone sea height 超鏈接 並且 另一個 一個數 寫出幾種IE6 BUG的解決方法 1.雙邊距BUG float引起的 使用display2.3像素問題 使用float引起的 使用dislpay:inline -3px3.超鏈接hover 點擊後失

java入門必學：HTML和CSS

java ；入門 ； html； css Java開發已經悄無聲息的走進我們的生活中，無論是手機軟件、手機Java遊戲還是電腦軟件等，只要你使用到電子產品就會碰到和Java有關的東西，更多的企業正采用Java語言開發網站，也吸引了好多誌同道合的朋友開始加入Java開發的行列。 我們知道在

Html和CSS的關系

我們 理解 b前端開發 特效 web前端 制作 技術 ava 背景 學習web前端開發基礎技術需要掌握：HTML css JavaScript語言。 下面我們就來了解下這三門技術都是用來實現什麽的： 1. HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽