HTML+CSS佈局技巧及兼容問題【閱讀季】

時間 2019-11-21

標籤 html+css html css 佈局技巧兼容問題閱讀季欄目 CSS 简体版

原文原文鏈接

在IE6和IE7中，行高值必須大於字體的2px以上才能保證字體的完整顯示或看成爲連接時能顯示下劃線。css
IE6 下去掉 input等元素的邊框 border: 0 none; 全部瀏覽器均可以了html
邊框1px {td不重疊狀態}：border-collapse: collapse;（table、td需同時設置）css3
IE六、7邊框斷續：{min-height:1px; _height:1px;}或{zoom：1；overflow:hidden;}都可解決web
IE六、七、8 FF 兼容透明：filter:alpha(opacity=70);-moz-opacity:0.7;opacity: 0.7express
IE六、七、8 FF 瀏覽器兼容虛線框：a{outline:none; blr:expression(this.onFocus=this.blur());}/*ie輸入框input輸入法不能切換*/瀏覽器
文字中間橫線：text-decoration:line-through;app
css3投影效果：文字{text-shadow:1px -1px 1px #970505;} 盒子{box-shadow:2px 2px 2px #fff;}ide
文字省略號css樣式:text-overflow:ellipsis ;{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:315px; }必備條件佈局
textarea輸入框設置：resize:none;overflow-y: auto;豎條顯示無字體
圖片垂直居中代碼css：display: table-cell; overflow: hidden;text-align: center;vertical-align: middle;
/*兼容ie6-7*/{+display:block;+font-size:300px;+font-family:"Times New Roman", Times, serif;}
中文字間距：letter-spacing: 50px;{可取正負值}
Div最小高度兼容IE6：height:100px;overflow:visible;{min-height:100px;height:auto !important;}IE七、8 FF兼容
div的垂直居中問題 vertical-align:middle; 將行距增長到和整個DIV同樣高 ; 而後插入文字，就垂直居中了。缺點是要控制內容不要換行
Position：relative定位問題針對IE6：(1)給父層設置zoom:1;觸發layout; (2)給父層設置width或height
position:fixed不兼容ie6設置：正常設置：position:fixed;width:100%;left:0;bottom:0px;
Ie6設置下：
內頁裏：*html{background-image:url(about:blank);background-attachment:fixed;}/*解決IE6下滾動抖動的問題*/
.類名{_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));_margin-bottom:0px;}
使用IE特有的條件判斷語句：
 除IE外均可識別
div的垂直居中問題 vertical-align:middle; 將行距增長到和整個DIV同樣高 line-height:200px;而後插入文字，就垂直居中了。缺點是要控制內容不要換行。
margin加倍的問題

設置爲float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。

解決方案是在這個div裏面加上display:inline;

例如：

<#div id=」imfloat」>

相應的css爲

#IamFloat

{

　　float:left; margin:5px;/*IE下理解爲10px*/

　　display:inline;/*IE下再理解爲5px*/

}
浮動ie產生的雙倍距離

#box{

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

}

這裏細說一下block與inline兩個元素：

block元素的特色是,老是在新行上開始,高度,寬度,行高,邊距均可以控制(塊元素);

Inline元素的特色是,和其餘元素在同一行上,不可控制(內嵌元素);

#box

{

　　display:block; //能夠爲內嵌元素模擬爲塊元素

　　display:inline; //實現同一行排列的效果

　　diplay:table;

}
IE與寬度和高度的問題
IE 不認得min-這個定義，但實際上它把正常的width和height看成有min的狀況來使。這樣問題就大了，若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。
好比要設置背景圖片，這個寬度是比較重要的。
要解決這個問題，能夠這樣：
#box{ width: 80px; height: 35px;}
html>body #box
{
width: auto; height: auto; min-width: 80px; min-height: 35px;
}
頁面的最小寬度
min -width是個很是方便的CSS命令，它能夠指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當作最小寬度來使。爲了讓這一命令在IE上也能用，能夠把一個<div> 放到 <body> 標籤下，而後爲div指定一個類, 而後CSS這樣設計：
#container{ min-width: 600px; width:e-xpression(document.body.clientWidth < 600? "600px": "auto" );}
第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上經過Javascript的判斷來實現最小寬度。
DIV浮動IE文本產生3象素的bug
左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //這句是關鍵}
<div id="box">
　　<div id="left"></div>
　　<div id="right"></div>
</div>
IE捉迷藏的問題
當div應用複雜的時候每一個欄中又有一些連接，DIV等這個時候容易發生捉迷藏的問題。有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。
解決辦法：
對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構儘可能簡單。
float的div閉合;清除浮動;自適應高度;
例如：<#div id=」floatA」 ><#div id=」floatB」 ><#div id=」 NOTfloatC」 >
這裏的NOTfloatC並不但願繼續平移，而是但願往下排。(其中floatA、floatB的屬性已經設置爲 float:left;)
這段代碼在IE中毫無問題，問題出在FF。緣由是NOTfloatC並不是float標籤，必須將float標籤閉合。
在 <#div class=」floatB」> <#div class=」NOTfloatC」>之間加上 < #div class=」clear」>這個div必定要注意位置，並且必須與兩個具備float屬性的div同級，之間不能存在嵌套關係，不然會產生異常。
而且將clear這種樣式定義爲爲以下便可： .clear{ clear:both;}
做爲外部 wrapper 的 div 不要定死高度
爲了讓高度能自動適應，要在wrapper裏面加上overflow:hidden;
當包含float的 box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;能夠作到，這樣就達到了兼容。
例如某一個wrapper以下定義： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
對於排版
咱們用得最多的css描述可能就是float:left.有的時候咱們須要在n欄的float div後面作一個統一的背景,
譬如: <div id=」page」> <div id=」left」></div> <div id=」center」></div> <div id=」right」></div> </div>
好比咱們要將page的背景設置成藍色,以達到全部三欄的背景顏色是藍色的目的,
可是咱們會發現隨着left center right的向下拉長,而 page竟然保存高度不變,問題來了,
緣由在於page不是float屬性,而咱們的page因爲要居中,不能設置成float,
因此咱們應該這樣解決:
<div id=」page」>
<div id=」bg」 style=」float:left;width:100%」>
<div id=」left」></div>
<div id=」center」></div>
<div id=」right」></div>
</div>
</div>
再嵌入一個float left而寬度是100%的DIV解決之
萬能float 閉合(很是重要!)
關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將如下代碼加入Global CSS 中,給須要閉合的div加上 class="clearfix" 便可,屢試不爽.
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者這樣設置：.hackbox{ display:table; //將對象做爲塊元素級的表格顯示}

使用after僞對象清楚浮動。

該方法只適用於非IE瀏覽器。

使用中需注意如下幾點。

1.該方法中必須爲須要清除浮動元素的僞對象中設置height:0，不然該元素會比實際高出若干像素；

2.content屬性是必須的，但其值能夠爲空，藍色理想討論該方法的時候content屬性的值設爲"."，但我發現爲空亦是能夠的。
高度不適應
高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或paddign 時。
例：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p對象中的內容</p>
</div>
解決方法：
在P對象上下各加2個空的div對象CSS代碼：
.1{height:0px;overflow:hidden;}或者爲DIV加上border屬性。
IE6下爲何圖片下有空隙產生
解決這個BUG的方法也有不少,
能夠是改變html的排版,
或者設置img 爲display:block
或者設置vertical-align 屬性爲 vertical-align:top | bottom |middle |text-bottom 均可以解決.
如何對齊文本與文本輸入框
加上 vertical-align:middle;
<style type="text/css">

</style>
web標準中定義id與class有什麼區別嗎?
一.web標準中是不允許重複ID的,好比 div id="aa" 不允許重複2次,而class 定義的是類,理論上能夠無限重複, 這樣須要屢次引用的定義即可以使用他.
二.屬性的優先級問題 ID 的優先級要高於class,看上面的例子
三.方便JS等客戶端腳本,若是在頁面中要對某個對象進行腳本操做,那麼能夠給他定義一個ID,不然只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單.
LI中內容超過長度後以省略號顯示的方法
此方法適用與IE與OP瀏覽器
<style type="text/css">

</style>
爲何沒法定義1px左右高度的容器
IE6下這個問題是由於默認的行高形成的,
解決的方法也有不少
例如:overflow:hidden | zoom:0.08 | line-height:1px
怎麼樣才能讓層顯示在FLASH之上呢
解決的辦法是給FLASH設置透明
<param name="wmode" value="transparent" />
怎樣使一個層垂直居中於瀏覽器中
這裏咱們使用百分比絕對定位,與外補丁負值的方法,負值的大小爲其自身寬度高度除以2
<style type="text/css">
<!—
div
{
position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
Div居中問題
div設置 margin-left, margin-right 爲 auto 時已經居中，
IE 不行，IE須要設定body居中，
首先在父級元素定義text-algin: center;
這個的意思就是在父級元素內的內容居中。
連接(a標籤)的邊框與背景
a 連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。
給 a 和 menubar 設置高度是爲了不底邊顯示錯位,
若不設 height, 能夠在 menubar 中插入一個空格。
超連接訪問事後hover樣式就不出現的問題
被點擊訪問過的超連接樣式不在具備hover和active了
解決方法是
改變CSS屬性的排列順序: L-V-H-A
Code:
<style type="text/css">

</style>
遊標手指cursor
cursor: pointer 能夠同時在 IE FF 中顯示遊標手指狀，
hand 僅 IE 能夠
UL的padding與margin
ul標籤在FF中默認是有padding值的,
而在IE中只有margin默認有值,
因此先定義 ul{margin:0;padding:0;}就能解決大部分問題
BOX模型解釋不一致問題
在FF和IE 中的BOX模型解釋不一致致使相差2px
解決方法：
div{margin:30px!important;margin:28px;}
注意這兩個 margin的順序必定不能寫反， important這個屬性IE不能識別，
但別的瀏覽器能夠識別。
因此在IE下其實解釋成這樣：
div {maring:30px;margin:28px}
重複定義的話按照最後一個來執行，因此不能夠只寫margin:xx px!important;
#box
{
width:600px; //for ie6.0\
- w\idth:500px; //for ff+ie6.0}
#box{
width:600px!important //for ff
width:600px; //for ff+ie6.0
width /**/:500px; //for ie6.0-}
屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)
p[id]{}
div[id]{}
這個對於IE6.0和IE6.0如下的版本都隱藏,
FF和OPera做用.屬性選擇器和子選擇器仍是有區別的,
子選擇器的範圍從形式來講縮小了,
屬性選擇器的範圍比較大,
如p[id]中,全部p標籤中有id的都是一樣式的
最狠的手段 - !important;

若是實在沒有辦法解決一些細節問題,
能夠用這個方法.FF對於」!important」會自動優先解析,
然而IE則會忽略.
以下
.tabd1
{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */
}
值得注意的是，必定要將xxxx !important 這句放置在另外一句之上，上面已經提過
爲何FF下文本沒法撐開容器的高度
標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的,
那我又想固定高度,又想能被撐開須要怎樣設置呢？
辦法就是去掉height設置min-height:200px;
這裏爲了照顧不認識min-height的IE6
能夠這樣定義: { height:auto!important; height:200px; min-height:200px; }
樓梯式的效果
幾乎全部的Web開發者都會使用list來建立導航條。下面是你可能會用到的代碼：
1. <ul>
2. <li><ahref="#"></a></li>
3. <li><ahref="#"></a></li>
4. <li><ahref="#"></a></li>
5. </ul>
1. ul {
2. list-style: none;
3. }
5. ul li a {
6. display: block;
7. width: 130px;
8. height: 30px;
9. text-align: center;
10. color: #fff;
11. float: left;
12. background: #95CFEF;
13. border: solid1px#36F;
14. margin: 30px5px;
15. }
下面是兩個解決方法

解決方法一

設置li元件的float屬性。
1. ul li { float: left; }
解決方法二

設置 display: inline 屬性。

ul li {
display: inline
}

float元件的兩倍空白
請看下面的代碼：
1. #element{
2. background: #95CFEF;
3. width: 300px;
4. height: 100px;
5. float: left;
6. margin: 30px0 030px;
7. border: solid1px#36F;
8. }
指望的結果是：

解決方案

和上面那個BUG的解決方案同樣，設置 display: inline 屬性能夠解決問題。

#element{
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px0 030px;
border: solid1px#36F;
display: inline;
}

IE6下的{clear:both}出現怪異的空白
.clear{ clear:both; height:0px; margin:0; padding:0; width:0; border:none; overflow:hidden; }
空div在IE(FF中沒有)是有默認高度的,能夠用定義:

div

{

width:100%;

background:#9c0;

ling-height:0

}
利用border屬性肯定出錯元素的佈局特性

使用float屬性佈局一不當心就會出錯。這時爲元素添加border屬性肯定元素邊界，錯誤緣由即水落石出。

border:1px solid #000;
float元素的父元素不能指定clear屬性

MacIE下若是對float的元素的父元素使用clear屬性，周圍的float元素佈局就會混亂。這是MacIE的著名的bug，假若不知道就會走彎路。
float元素務必指定width屬性

不少瀏覽器在顯示未指定width的float元素時會有bug。因此無論float元素的內容如何，必定要爲其指定width屬性
float元素的寬度之和要小於100%
若是float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。所以請保證寬度之和小於99%。
是否重設了默認的樣式？

某些屬性如margin、padding等，不一樣瀏覽器會有不一樣的解釋。所以最好在開發前首先將全體的margin、padding設置爲0、列表樣式設置爲none等。
【body,button,ul,li,ol,p,dl,dd,h1,h2,h3,h4,h5,h6,img,iframe,input,form,textarea{margin:0;padding:0;list-style-type:none;}】或*{ margin:0;padding:0}
是否忘記了寫DTD？

若是不管怎樣調整不一樣瀏覽器顯示結果仍是不同，那麼能夠檢查一下頁面開頭是否是忘了寫下面這行DTD：

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

相關標籤/搜索

每日一句

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