JinJin 的視覺設計專區 :: 跨瀏覽器相容性網頁設計

Changed By: HP
Change Date: September 27, 2011 07:04AM

[CSS] 捲軸 overflow 針對 IE 的跨瀏覽器使用：設定 width、加上 overflow-y: hidden、設為 block

1. 要記得加上 width（在 IE6 中不加 width，overflow 會無效）。

例如：
pre{ overflow: auto; width: 700px; } 

2. 若只有水平捲軸，對 IE 瀏覽器請將垂直捲軸（overflow-y）移除。

IE 和 Firefox 比較：IE 的水平捲軸會「算在區塊裡面」，所以造成本來沒有的垂直捲軸又跑出來。若要解決，請將垂直捲軸設為隱藏： overflow-y: hidden。

參考資料：
http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/

3. 有些HTML標籤要設為 display:block：例如 <xmp>

在 IE8 中會把 <xmp>（功能是把HTML tag視為純文字，全不解讀）視為 inline 元素，此時 overflow 的功能會失效，故需將 <xmp> 設為 block。

例如：

xmp{

    overflow: auto;

    width: 700px;

    display: block;

}

修正IE下使用CSS属性overflow的bug
http://www.lunaticsun.com/article/ie-overflowbug
http://blog.csdn.net/slalx/article/details/3073100

Changed By: HP
Change Date: September 23, 2011 02:04PM

捲軸 overflow 針對 IE 的跨瀏覽器使用：設定 width、加上 overflow-y: hidden、設為 block

1. 要記得加上 width（在 IE6 中不加 width，overflow 會無效）。

例如：
<xmp>pre{
overflow: auto;
width: 700px;
}
</xmp>

2. 若只有水平捲軸，對 IE 瀏覽器請將垂直捲軸移2. 若只有水平捲軸，對 IE 瀏覽器請將垂直捲軸（overflow-y）移除。

IE 和 Firefox 比較：IE 的水平捲軸會「算在區塊裡面」，所以造成本來沒有的垂直捲軸又跑出來。若要解決，請將垂直捲軸設為隱藏： overflow-y: hidden。

<img src="http://remysharp.com/wp-content/uploads/2008/01/firefox-compared-to-ie-overflow-broken.gif"/>

參考資料：
http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/

3. 有些HTML標籤要設為 display:block：例如 <xmp>

在 IE8 中會把 <xmp>（功能是把HTML tag視為純文字，全不解讀）視為 inline 元素，此時 overflow 的功能會失效，故需將 <xmp> 設為 block。

例如：
<pre>xmp{
overflow: auto;
width: 700px;
display: block;
}
</pre>

修正IE下使用CSS属性overflow的bug
http://www.lunaticsun.com/article/ie-overflowbug
http://blog.csdn.net/slalx/article/details/3073100

Changed By: HP
Change Date: September 23, 2011 02:20AM

捲軸 overflow 針對 IE 的跨瀏覽器使用：設定 width、加上padding-bottom、width、加上 overflow-y: hidden、設為 block

1. 要記得加上 width（在 IE6 中不加 width，overflow 會無效）。

例如：
<xmp>pre{
overflow: auto;
width: 700px;
}
</xmp>

2. 若只有水平捲軸，對 IE 瀏覽器可加上大約 20px 的 padding-bottom。

IE 和 Firefox 比較：IE 的水平捲軸會「算在區塊裡面」，所以造成本來沒有的垂直捲軸又跑出來
efox 比較：IE 的水平捲軸會「算在區塊裡面」，所以造成本來沒有的垂直捲軸又跑出來。若要解決，請將垂直捲軸設為隱藏： overflow-y: hidden。

捲軸會「算在區塊裡面」，所以造成本來沒有的垂直捲軸又跑出來。若要解決，請將垂直捲軸設為隱藏： overflow-y: hidden。

<img src="http://remysharp.com/wp-content/uploads/2008/01/firefox-compared-to-ie-overflow-broken.gif"/>

參考資料：
http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/

3. 有些HTML標籤要設為 display:block：例如 <xmp>

在 IE8 中會把 <xmp>（功能是把HTML tag視為純文字，全不解讀）視為 inline 元素，此時 overflow 的功能會失效，故需將 <xmp> 設為 block。

例如：
<pre>xmp{
overflow: auto;
widtticle/details/3073100: block;
}
</pre>

修正IE下使用CSS属性overflow的bug
http://www.lunaticsun.com/article/ie-overflowbug
http://blog.csdn.net/slalx/article/details/3073100

Original Message

作者: HP
Date: September 23, 2011 01:49AM

捲軸 overflow 針對 IE 的跨瀏覽器使用：設定 width、加上padding-bottom、width、加上 overflow-y: hidden、設為 block

1. 要記得加上 width（在 IE6 中不加 width，overflow 會無效）。

例如：
pre{ overflow: auto; width: 700px; } 

2. 若只有水平捲軸，對 IE 瀏覽器可加上大約 20px 的 padding-bottom。

IE 和 Firefox 比較：IE 的水平捲軸會「算在區塊裡面」，所以造成本來沒有的垂直捲軸又跑出來
捲軸會「算在區塊裡面」，所以造成本來沒有的垂直捲軸又跑出來。若要解決，請將垂直捲軸設為隱藏： overflow-y: hidden。

參考資料：
http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/

3. 有些HTML標籤要設為 display:block：例如 <xmp>

在 IE8 中會把 <xmp>（功能是把HTML tag視為純文字，全不解讀）視為 inline 元素，此時 overflow 的功能會失效，故需將 <xmp> 設為 block。

例如：

xmp{

    overflow: auto;

    widt: block;

}

修正IE下使用CSS属性overflow的bug
http://www.lunaticsun.com/article/ie-overflowbug
http://blog.csdn.net/slalx/article/details/3073100

Change History

Original Message