9個最常見IE的Bug及其fix
Internet Explorer – Web程式設計師的毒藥。在IE上開發時間中有超過60%的時間是花在和IE的bug進行搏鬥，讓你的開發生產率嚴重下降。下面是一個教程，告訴你9個IE上最常見的BUG以及如何解決它們。
1. 居中佈局
建立一個CSS定義把一個元素放到中間的位置，可能是每一個Web開發人員都會做的事情。最簡單的做法是為你的元素增加一個margin: auto; ，然而 IE 6.0 會出現很多奇怪的行為。讓我們來看一個例子。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#container{
border:solid
1px #000;
background:#777;
width:400px;
height:160px;
margin:30px
0 0
30px;
}
#element{
background:#95CFEF;
border:solid
1px #36F;
width:300px;
height:100px;
margin:30px
auto;
}
|
下面是我們所期望的輸出：
但IE卻給我們這樣的輸出：
這應該是IE 6對margin的 auto 並沒有正確的設定。但幸運的是，這是很容易被修正的。
解決方法
最簡單的方法是在父元件中使用 text-align: center 屬性，而在元件中使用text-align: left 。
|
1 |
#container{
border:solid
1px #000;
background:#777;
width:400px;
height:160px;
margin:30px
0 0
30px;
text-align:center;
}
#element{
background:#95CFEF;
border:solid
1px #36F;
width:300px;
height:100px;
margin:30px
0;
text-align:left;
}
|
2. 樓梯式的效果
幾乎所有的Web開發者都會使用list來建立導航條。下面是你可能會用到的程式碼：
| 1 2 3 4 5 |
<ul>
<li><ahref="#"></a></li>
<li><ahref="#"></a></li>
<li><ahref="#"></a></li>
</ul>
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
ul {
list-style:none;
}
ul li a {
display:block;
width:130px;
height:30px;
text-align:center;
color:#fff;
float:left;
background:#95CFEF;
border:solid
1px #36F;
margin:30px
5px;
}
|
一個符合標準的瀏覽器會是下面這樣：
但IE卻是這樣的：
下面是兩個解決方法
解決方法一
設定li元件的float屬性。
| 1 2 3 |
ul li {
float:left;
}
|
解決方法二
設定 display: inline 屬性。
| 1 2 3 |
ul li {
display:inline
}
|
3. float元件的兩倍空白
請看下面的程式碼：
| 1 2 3 4 5 6 7 8 |
#element{
background:#95CFEF;
width:300px;
height:100px;
float:left;
margin:30px
0 0
30px;
border:solid
1px #36F;
}
|
期望的結果是：
IE的結果是：
解決方案
和上面那個BUG的解決方案一樣，設定 display: inline 屬性可以解決問題。
| 1 2 3 4 5 6 7 8 9 |
#element{
background:#95CFEF;
width:300px;
height:100px;
float:left;
margin:30px
0 0
30px;
border:solid
1px #36F;
display:inline;
}
|
4. 無法設定微型高度
我們發現在IE中使用 height: XXpx 這樣的屬性無法設定比較小的高度。下面是個例子（注意高度是2px）：
| 1 2 3 4 5 6 7 |
#element{
background:#95CFEF;
border:solid
1px #36F;
width:300px;
height:2px;
margin:30px
0;
}
|
期望結果： 2px的元件加1px的邊框.
IE的結果：
解決方案一
這個BUG的產生原因很簡單，IE不允許元件的高度小於字型的高度，所以，下面的fix是設定上字型大小。
| 1 2 3 4 5 6 7 8 |
#element{
background:#95CFEF;
border:solid
1px #36F;
width:300px;
height:2px;
margin:30px
0;
font-size:0;
}
|
解決方案二
但是最佳的解決方法是使用 overflow: hidden 。
| 1 2 3 4 5 6 7 8 |
#element{
background:#95CFEF;
border:solid
1px #36F;
width:300px;
height:2px;
margin:30px
0;
overflow:hidden
}
|
5. 跨出邊界
這個BUG是很難看的。當父元件中使用了 overflow 的 auto 屬性，並且在其裡放入相關元件。你會看來裡面的元件會跨出來。下面是一個示例：
| 1 |
<divid="element"><divid="anotherelement"></div></div>
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#element{
background:#95CFEF;
border:solid
1px #36F;
width:300px;
height:150px;
margin:30px
0;
overflow:auto;
}
#anotherelement{
background:#555;
width:150px;
height:175px;
position:relative;
margin:30px;
}
|
期望的結果：
IE的結果：
解決方法
設定 position: relative;屬性
| 1 2 3 4 5 6 7 8 9 |
#element{
background:#95CFEF;
border:solid
1px #36F;
width:300px;
height:150px;
margin:30px
0;
overflow:auto;
position:relative;
}
|
6. Fixing the Broken Box Model
Internet Explorer曲解了“盒子模子”可能是最不可原諒的事情了。IE 6 這個半標準的瀏覽器迴避了這個事情，但這個問題還是會因為IE執行在“怪異模式”下出現。
兩個Div元件。一個是有fix的，一個是沒有的。而他們不同的高和寬加上padding的總合卻是不一樣的。下圖的上方是被修正的，下方則沒有。
解決方法
我相信這個事情即不需要解釋也不需要演示，這應該是大多數人都明白的。下面是一個很相當怪異的解決方案
| 1 2 3 4 5 |
#element{
width:400px;
height:150px;
padding:50px;
}
|
上面的定義也就是說：
| 1 2 3 4 5 6 |
#element {
width:400px;
height:150px;
\height:250px;
\width:500px
}
|
是的，你要原來的長和寬上加上了padding。但這個fix只會作用於IE了的“怪異模式”，所以你不需要擔心在IE6的正常模式下會有問題。
7. 設定min-height和min-width
IE忽略了min-height。
解決方法一
這個fix由 Dustin Diaz提供。其利用了 !important 下面是程式碼片段：
| 1 2 3 4 5 |
#element {
min-height:150px;
height:auto!important;
height:150px;
}
|
解決方法二
| 1 2 3 4 5 6 7 8 |
#element {
min-height:150px;
height:150px;
}
html>body #element {
height:auto;
}
|
8. Float 佈局錯誤行為 Misbehaving
使用無table的佈局最重要的就是使用CSS的float元件。在很多情況下，IE6處理起來好像在摸索階段，有些時候，你會發現很多奇怪的行為。比如在其中有一些文字的時候。
來看一下下面這個示例：
| 1 2 3 4 |
<divid="container">
<divid="anotherelement"></div>
</div>
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#element, #anotherelement{
background:#95CFEF;
border:solid
1px #36F;
width:100px;
height:150px;
margin:30px;
padding:10px;
float:left;
}
#container{
background:#C2DFEF;
border:solid
1px #36F;
width:365px;
margin:30px;
padding:5px;
overflow:auto;
}
|
期望結果：
IE的結果：
你可以看到其中的不同了
解決方法
要解決這個問題沒有什麼好的方法。只有一個方法，那就是使用 overflow: hidden 。
| 1 2 3 4 5 6 7 8 |
#element{
background:#C2DFEF;
border:solid
1px #36F;
width:365px;
margin:30px;
padding:5px;
相關推薦9個最常見IE的Bug及其fixInternet Explorer – Web程式設計師的毒藥。在IE上開發時間中有超過60%的時間是花在和IE的bug進行搏鬥，讓你的開發生產率嚴重下降。下面是一個教程，告訴你9個IE上最常見的BUG以及如何解決它們。 1. 居中佈局 建立一個CSS定義把一個元素放到 [leetcode]692. Top K Frequent Words K個最常見單詞Given a non-empty list of words, return the k most frequent elements. Your answer should be sorted by frequency from highest to lowest. If two w [leetcode]347. Top K Frequent Elements K個最常見元素Given a non-empty array of integers, return the k most frequent elements. Example 1: Input: nums = [1,1,1,2,2,3], k = 2 Output: [1,2] Exam MATLAB sort函式應用——求一個矩陣前L個最大值及其在矩陣中的位置For vectors, sort(X) sorts the elements of X in ascending order. For matrices, sort(X) sorts each column of X in ascending order.For N-D 10個最常見的 HTML5 面試題及答案<video width=”450″ height=”340″ controls> <source src=”jamshed.mp4″ type=”video/mp4″> <source src=”jamshed.ogg” type=”video/ogg” 5個最常見的Java語言特點匯總，幫你更好學好Java！多繼承 amp 接口 了解 函數 網絡編程 程序設計語言 人員 blog 作為編程屆的常青樹，Java常年盤踞在語言榜第一的位置，從業人員薪資待遇也普遍不錯。目前，Java應用廣泛，Java就業前景良好！雖然Java人才的薪水很高，但是對該類人才需求旺盛的IT企業卻很難招聘 最常見的幾個異常最常見的幾個異常 java.lang.NullPointerException 空指標異常；出現原因：呼叫了未經初始化的物件或者是不存在的物件。 java.lang.ClassNotFoundException 指定的類找不到；出現原因：類的名稱和路徑載入錯誤；通常都是程式試圖通過字 關於操作 Python 列表最常見的10個問答列表是最常用的資料型別之一，本文整理了 StackOverflow 上關於列表操作被訪問最多的10個問答，如果你在開發過程中遇到這些問題，不妨先思考一下如何解決。 1、迭代列表時如何訪問列表下標索引 普通版： items = [8, 23, 45] for index in range(le 5個Excel最常見的「錯誤值」，這些含義你都知道嗎？在職場辦公中，很多朋友都會遇到這樣的情況，明明自己輸入的是正確的公式，但顯示出來的數值卻 是錯誤值，那你知道他們都是什麼含義嗎？不知道的趕緊來看。 一、【#DIV/0】 錯誤原因：公式中有除數為0或者除數為空的單元格。 解決方法：更正除數為0或者除數為空的單元格 關於大資料最常見的10個問題1、雲端計算與大資料是什麼關係? 雲端計算的關鍵詞在於“整合”，無論你是通過現在已經很成熟的傳統的虛擬機器切分型技術，還是通過google後來所使用的海量節點聚合型技術，他都是通過將海量的伺服器資源通過網路進行整合，排程分配給使用者，從而解決使用者因為儲存計算資源不足所帶來 使用Arduino開發板時最常見的10個錯誤作為Arduino開發板的初學者，對於沒有電子背景的人來說非常具有挑戰性，你會遇到很多錯誤，其中一些可能有簡單的解決方案，但可能需要幾天的時間來解決。因此，為了使事情變得更容易，我製作了一個包含10個最常見的Arduino錯誤的列表，以及可能的解決方案。 Arduino 串的定長順序儲存結構：求串s中出現的第一個最長重複子串及其位置假設以定長順序儲存結構表示串，試設計一個演算法，求串s中出現的第一個最長重複子串及其位置。 定長順序串SString的型別定義：typedef unsigned char SString[MAXSTRLEN+1]; /* s[0] is the string's le Java面試中最常見的10個問題，Java底層知識，花點時間學習一下1.什麼是 Java 虛擬機器？為什麼 Java 被稱作是“平臺無關的程式語言”？ Java 虛擬機器是一個可以執行 Java 位元組碼的虛擬機器程序。Java 原始檔被編譯成能被 Java 虛擬機器執行的位元組碼檔案。 Java 被設計成允許應用程式可以執行在任意的平臺，而不需要程式設計師為每 IE瀏覽器常見的9個css Bug以及解決辦法我們在瀏覽網頁的時候經常看見這樣的現象：某個網頁在IE6瀏覽器中開啟很正常，但是在IE8裡面開啟可能完全變形了。或者也有可能出現完全相反的現象。這讓Web程式設計師及設計師往往為了其CSS在各個IE版本下表現怪異而痛苦不已，有時候需要通過專為IE6或者IE8設計單獨的定義。IE瀏覽器則因此被公認為Web 9個常見的Redis面試"刁難"問題出現 但是 節點 縮減 估計 繼續 http 一個 tina 9個常見的Redis面試"刁難"問題 1 Redis有哪些數據結構？ 字符串String、字典Hash、列表List、集合Set、有序集合SortedSet。如果你是Redis中高級用戶，還需 揭祕當下最主流的的7個app推廣渠道及其不為人知的祕密以app為主要形式的移動網際網路2010年到2018年，經過了8年的發展，App的數量猛增，這使得App在推廣方面的競爭也是非常激烈，有錢的App大把的砸錢， 而沒有錢的開發者只能望眼欲穿。 下面筆者就把目前最主流的一些App推廣的渠道分享給大家，以及其中的一些幕後的祕密 【bug日記】IE瀏覽器常見的9個css Bug以及解決辦法學了幾天的CSS，就讓我這個菜鳥把CSS Bug一下子吧！ 1. 3px Bug 描述：IE下兩個div之間會出現3個畫素的Bug，這個bug是在當對一個div用了float元素時，而div未使用時則會出現。 解決方法：a.對另一個元素同時使用 求職Python開發，面試官最喜歡問的9個問題【附答案】image ofo 關鍵字 return *args 面試 沒有 ret ive 0. 概述 Python是個非常受歡迎的編程語言，隨著近些年機器學習、雲計算等技術的發展，Python的職位需求越來越高。下面我收集了一些Python面試官經常問的問題，供大家參考學習。 相 Java 9 中的 9 個新特性不想 行為 添加元素 ase 結合 quest 簡單 通過 this Java 8 發布三年多之後，即將快到2017年7月下一個版本發布的日期了。 你可能已經聽說過 Java 9 的模塊系統，但是這個新版本還有許多其它的更新。 這裏有九個令人興奮的新功能將與 Java 9 17個新手常見Python運行時錯誤字符 ++ lambda you ssi ref ror scan 做的 當初學 Python 時，想要弄懂 Python 的錯誤信息的含義可能有點復雜。這裏列出了常見的的一些讓你程序 crash 的運行時錯誤。 1）忘記在 if , elif , else , for , |