Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

Message: [列表] 常見跨瀏覽器相容問題整理

討論區清單 文章列表
Changed By: mepoadm
Change Date: March 01, 2012 09:06PM

[列表] 常見跨瀏覽器相容問題整理
<h2>標籤</h2>
<h3>表格標籤(table)</h3>
<h3>清單標籤(ul ol li)</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20001]1.IE瀏覽器瀏覽器下列表式型無效的問題[/url][/color]</b>

<h3>段落標籤 p</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20002]1.段落標籤(p)預設前後邊距問題[/url][/color]</b>

<h3>圖像標籤 img</h3>
<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖像下方產生間隙[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 <h4>圖像下方產生間隙圖片透明背景[/url]</b>
<b>[url=：4>
http://mepopedia.com/forum/read.php?8172]3.019

<h4>
<h、title使用上的不同</h4>
ALT5 / 6 不支援 PNG 圖片透明背景：http[/url]</b>
72
mepopedia.com/forum/read.php?844,20019

<h4>alt、title使用上的不同</h4>
ALT屬性與tilte屬性於圖像替代文字與信息提示功能的差異：http://mepopedia.com/forum/read.php?844,20172

<h2>屬性</h2>
以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html
<h3>浮動屬性(Float)</h3>

<b>[url=http://vd.mepopedia.com/forum/read.php?844,18331]1.雙倍邊距(Double Margin)問題[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20003]2.在IE中，用了%設定寬度之float多欄式版面會無法正常顯示[/url]</b>


<h3>背景屬性（background）</h3>
background (14.2.1)

background-attachment (14.2.1)

background-color (14.2.1)

background-image (14.2.1)

background-position (14.2.1)

background-repeat (14.2.1)

<h3>邊框屬性（border）</h3>
border (8.5.4)

border-bottom (8.5.4)

border-bottom-color (8.5.2)

border-bottom-style (8.5.3)

border-bottom-width (8.5.1)

border-collapse (17.6)

border-color (8.5.2)

border-left (8.5.4)

border-left-color (8.5.2)

border-left-style (8.5.3)

border-left-width (8.5.1)

border-right (8.5.4)

border-right-color (8.5.2)

border-right-style (8.5.3)

border-right-width (8.5.1)

border-spacing (17.6)

border-style (8.5.3)

border-top (8.5.4)

border-top-color (8.5.2)

border-top-style (8.5.3)

border-top-width (8.5.1)

border-width (8.5.1)



caption-side (17.4.1)

clear (9.5.2)

clip (11.1.2)

color (14.1)

content (12.2)

counter-increment (12.5)

counter-reset (12.5)

cursor (18.1)

direction (9.10)

display (9.2.5)

display (17.2)

empty-cells (17.6.1)

float (9.5.1)

[hr]
<h3>文字屬性font</h3>
font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

<b>[url=http://mepopedia.com/forum/read.php?844,20004]1.使用%來設定大小的文字，其顯示狀況會因瀏覽器而異[/url]</b>


[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

font-variant (15.2.3)

font-weight (15.2.3)

height (10.5)

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>


[hr]


list-style-position (12.6.2)

list-style-type (12.6.2)

<h3>邊距（margin）</h3>
margin (8.3)

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

<h3>內距（padding）</h3>
padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

<h3>定位屬性（position）</h3>
position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

<h3>垂直置齊（vertical-align）</h3>
vertical-align (10.8)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)
Changed By: JinJin
Change Date: February 29, 2012 01:47AM

[列表] 常見跨瀏覽器相容問題整理
<h2>標籤</h2>
<h3>表格標籤(table)</h3>
<h3>清單標籤(ul ol li)</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20001]1.IE瀏覽器瀏覽器下列表式型無效的問題[/url][/color]</b>

<h3>段落標籤 p</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20002]1.段落標籤(p)預設前後邊距問題[/url][/color]</b>

<h3>圖像標籤 img</h3>
<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖像下方產生間隙[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 <h4>圖像下方產生間隙圖片透明背景[/url]</b>

[hr]
<b>[url=4>
http://mepopedia.com/forum/read.php?8172]3.
<h5 / 6 不支援 PNG 圖片透明背景：http[/url]</b>
mepopedia.com/forum/read.php?844,20019

<h4>alt、title使用上的不同</h4>
ALT屬性與tilte屬性於圖像替代文字與信息提示功能的差異：http://mepopedia.com/forum/read.php?844,20172

<h2>屬性</h2>
以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html
<h3>浮動屬性(Float)</h3>

<b>[url=http://vd.mepopedia.com/forum/read.php?844,18331]1.雙倍邊距(Double Margin)問題[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20003]2.在IE中，用了%設定寬度之float多欄式版面會無法正常顯示[/url]</b>


<h3>背景屬性（background）</h3>
background (14.2.1)

background-attachment (14.2.1)

background-color (14.2.1)

background-image (14.2.1)

background-position (14.2.1)

background-repeat (14.2.1)

<h3>邊框屬性（border）</h3>
border (8.5.4)

border-bottom (8.5.4)

border-bottom-color (8.5.2)

border-bottom-style (8.5.3)

border-bottom-width (8.5.1)

border-collapse (17.6)

border-color (8.5.2)

border-left (8.5.4)

border-left-color (8.5.2)

border-left-style (8.5.3)

border-left-width (8.5.1)

border-right (8.5.4)

border-right-color (8.5.2)

border-right-style (8.5.3)

border-right-width (8.5.1)

border-spacing (17.6)

border-style (8.5.3)

border-top (8.5.4)

border-top-color (8.5.2)

border-top-style (8.5.3)

border-top-width (8.5.1)

border-width (8.5.1)



caption-side (17.4.1)

clear (9.5.2)

clip (11.1.2)

color (14.1)

content (12.2)

counter-increment (12.5)

counter-reset (12.5)

cursor (18.1)

direction (9.10)

display (9.2.5)

display (17.2)

empty-cells (17.6.1)

float (9.5.1)

[hr]
<h3>文字屬性font</h3>
font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

<b>[url=http://mepopedia.com/forum/read.php?844,20004]1.使用%來設定大小的文字，其顯示狀況會因瀏覽器而異[/url]</b>


[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

font-variant (15.2.3)

font-weight (15.2.3)

height (10.5)

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>


[hr]


list-style-position (12.6.2)

list-style-type (12.6.2)

<h3>邊距（margin）</h3>
margin (8.3)

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

<h3>內距（padding）</h3>
padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

<h3>定位屬性（position）</h3>
position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

<h3>垂直置齊（vertical-align）</h3>
vertical-align (10.8)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)
Changed By: JinJin
Change Date: February 15, 2012 01:01PM

[列表] 常見跨瀏覽器相容問題整理
<h2>標籤</h2>
<h3>表格標籤(table)</h3>
<h3>清單標籤(ul ol li)</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20001]1.IE瀏覽器瀏覽器下列表式型無效的問題[/url][/color]</b>

<h3>段落標籤 p</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20002]1.段落標籤(p)預設前後邊距問題[/url][/color]</b>

<h3>圖像屬性 img</h3>
<h3>圖像標籤 img</h3>
<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖像下方產生間隙[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 <h4>圖像下方產生間隙圖片透明背景[/url]</b>

[hr]
<b>[url=4>
http://mepopedia.com/forum/read.php?8172]3.
<h5 / 6 不支援 PNG 圖片透明背景：http[/url]</b>
mepopedia.com/forum/read.php?844,20019

<h4>alt、title使用上的不同</h4>
ALT屬性與tilte屬性於圖像替代文字與信息提示功能的差異：http://mepopedia.com/forum/read.php?844,20172

<h2>屬性</h2>
以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html
<h3>浮動屬性(Float)</h3>

<b>[url=http://vd.mepopedia.com/forum/read.php?844,18331]1.雙倍邊距(Double Margin)問題[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20003]2.在IE中，用了%設定寬度之float多欄式版面會無法正常顯示[/url]</b>


<h3>背景屬性（background）</h3>
background (14.2.1)

background-attachment (14.2.1)

background-color (14.2.1)

background-image (14.2.1)

background-position (14.2.1)

background-repeat (14.2.1)

<h3>邊框屬性（border）</h3>
border (8.5.4)

border-bottom (8.5.4)

border-bottom-color (8.5.2)

border-bottom-style (8.5.3)

border-bottom-width (8.5.1)

border-collapse (17.6)

border-color (8.5.2)

border-left (8.5.4)

border-left-color (8.5.2)

border-left-style (8.5.3)

border-left-width (8.5.1)

border-right (8.5.4)

border-right-color (8.5.2)

border-right-style (8.5.3)

border-right-width (8.5.1)

border-spacing (17.6)

border-style (8.5.3)

border-top (8.5.4)

border-top-color (8.5.2)

border-top-style (8.5.3)

border-top-width (8.5.1)

border-width (8.5.1)



caption-side (17.4.1)

clear (9.5.2)

clip (11.1.2)

color (14.1)

content (12.2)

counter-increment (12.5)

counter-reset (12.5)

cursor (18.1)

direction (9.10)

display (9.2.5)

display (17.2)

empty-cells (17.6.1)

float (9.5.1)

[hr]
<h3>文字屬性font</h3>
font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

<b>[url=http://mepopedia.com/forum/read.php?844,20004]1.使用%來設定大小的文字，其顯示狀況會因瀏覽器而異[/url]</b>


[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

font-variant (15.2.3)

font-weight (15.2.3)

height (10.5)

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>


[hr]


list-style-position (12.6.2)

list-style-type (12.6.2)

<h3>邊距（margin）</h3>
margin (8.3)

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

<h3>內距（padding）</h3>
padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

<h3>定位屬性（position）</h3>
position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

<h3>垂直置齊（vertical-align）</h3>
vertical-align (10.8)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)
Changed By: JinJin
Change Date: February 12, 2012 02:02AM

[列表] 常見跨瀏覽器相容問題整理
<h2>標籤</h2>
<h3>表格標籤(table)</h3>
<h3>清單標籤(ul ol li)</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20001]1.IE瀏覽器瀏覽器下列表式型無效的問題[/url][/color]</b>

<h3>段落標籤 p</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20002]1.段落標籤(p)預設前後邊距問題[/url][/color]</b>

<h3>圖像屬性 img</h3>
<h3>圖像標籤 img</h3>
<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 / 6 不支援 PNG 圖片透明背景/url]</b>
像下方產生間隙[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 <h4>圖像下方產生間隙圖片透明背景[/url]</b>

[hr]
<b>[url=4>
http://mepopedia.com/forum/read.php?8172]3.
<h5 / 6 不支援 PNG 圖片透明背景：http[/url]</b>
mepopedia.com/forum/read.php?844,20019

<h4>alt、title使用上的不同</h4>
ALT屬性與tilte屬性於圖像替代文字與信息提示功能的差異：http://mepopedia.com/forum/read.php?844,20172

<h2>屬性</h2>
以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html
<h3>浮動屬性(Float)</h3>

<b>[url=http://vd.mepopedia.com/forum/read.php?844,18331]1.雙倍邊距(Double Margin)問題[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20003]2.在IE中，用了%設定寬度之float多欄式版面會無法正常顯示[/url]</b>


<h3>背景屬性（background）</h3>
background (14.2.1)

background-attachment (14.2.1)

background-color (14.2.1)

background-image (14.2.1)

background-position (14.2.1)

background-repeat (14.2.1)

<h3>邊框屬性（border）</h3>
border (8.5.4)

border-bottom (8.5.4)

border-bottom-color (8.5.2)

border-bottom-style (8.5.3)

border-bottom-width (8.5.1)

border-collapse (17.6)

border-color (8.5.2)

border-left (8.5.4)

border-left-color (8.5.2)

border-left-style (8.5.3)

border-left-width (8.5.1)

border-right (8.5.4)

border-right-color (8.5.2)

border-right-style (8.5.3)

border-right-width (8.5.1)

border-spacing (17.6)

border-style (8.5.3)

border-top (8.5.4)

border-top-color (8.5.2)

border-top-style (8.5.3)

border-top-width (8.5.1)

border-width (8.5.1)



caption-side (17.4.1)

clear (9.5.2)

clip (11.1.2)

color (14.1)

content (12.2)

counter-increment (12.5)

counter-reset (12.5)

cursor (18.1)

direction (9.10)

display (9.2.5)

display (17.2)

empty-cells (17.6.1)

float (9.5.1)

[hr]
<h3>文字屬性font</h3>
font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

<b>[url=http://mepopedia.com/forum/read.php?844,20004]1.使用%來設定大小的文字，其顯示狀況會因瀏覽器而異[/url]</b>


[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

font-variant (15.2.3)

font-weight (15.2.3)

height (10.5)

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>


[hr]


list-style-position (12.6.2)

list-style-type (12.6.2)

<h3>邊距（margin）</h3>
margin (8.3)

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

<h3>內距（padding）</h3>
padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

<h3>定位屬性（position）</h3>
position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

<h3>垂直置齊（vertical-align）</h3>
vertical-align (10.8)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)
Changed By: JinJin
Change Date: February 11, 2012 11:12AM

[列表] 常見跨瀏覽器相容問題整理
<h2>標籤</h2>
<h3>表格標籤(table)</h3>
<h3>清單標籤(ul ol li)</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20001]1.IE瀏覽器瀏覽器下列表式型無效的問題[/url][/color]</b>

<h3>段落標籤 p</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20002]1.段落標籤(p)預設前後邊距問題[/url][/color]</b>

<h3>圖像屬性</h3>

img

<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖像下方產生間隙[/url]</b>
<h3>圖像屬性</h3>

img

<h3>圖像屬性 img</h3>
<h3>圖像標籤 img</h3>
<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 / 6 不支援 PNG 圖片透明背景/url]</b>
像下方產生間隙[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 <h4>圖像下方產生間隙圖片透明背景[/url]</b>

[hr]
<b>[url=4>
http://mepopedia.com/forum/read.php?8172]3.
<h5 / 6 不支援 PNG 圖片透明背景：http[/url]</b>
mepopedia.com/forum/read.php?844,20019

<h4>alt、title使用上的不同</h4>
ALT屬性與tilte屬性於圖像替代文字與信息提示功能的差異：http://mepopedia.com/forum/read.php?844,20172

<h2>屬性</h2>
以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html
<h3>浮動屬性(Float)</h3>

<b>[url=http://vd.mepopedia.com/forum/read.php?844,18331]1.雙倍邊距(Double Margin)問題[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20003]2.在IE中，用了%設定寬度之float多欄式版面會無法正常顯示[/url]</b>


<h3>背景屬性（background）</h3>
background (14.2.1)

background-attachment (14.2.1)

background-color (14.2.1)

background-image (14.2.1)

background-position (14.2.1)

background-repeat (14.2.1)

<h3>邊框屬性（border）</h3>
border (8.5.4)

border-bottom (8.5.4)

border-bottom-color (8.5.2)

border-bottom-style (8.5.3)

border-bottom-width (8.5.1)

border-collapse (17.6)

border-color (8.5.2)

border-left (8.5.4)

border-left-color (8.5.2)

border-left-style (8.5.3)

border-left-width (8.5.1)

border-right (8.5.4)

border-right-color (8.5.2)

border-right-style (8.5.3)

border-right-width (8.5.1)

border-spacing (17.6)

border-style (8.5.3)

border-top (8.5.4)

border-top-color (8.5.2)

border-top-style (8.5.3)

border-top-width (8.5.1)

border-width (8.5.1)



caption-side (17.4.1)

clear (9.5.2)

clip (11.1.2)

color (14.1)

content (12.2)

counter-increment (12.5)

counter-reset (12.5)

cursor (18.1)

direction (9.10)

display (9.2.5)

display (17.2)

empty-cells (17.6.1)

float (9.5.1)

[hr]
<h3>文字屬性font</h3>
font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

<b>[url=http://mepopedia.com/forum/read.php?844,20004]1.使用%來設定大小的文字，其顯示狀況會因瀏覽器而異[/url]</b>


[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

font-variant (15.2.3)

font-weight (15.2.3)

height (10.5)

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>


[hr]


list-style-position (12.6.2)

list-style-type (12.6.2)

<h3>邊距（margin）</h3>
margin (8.3)

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

<h3>內距（padding）</h3>
padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

<h3>定位屬性（position）</h3>
position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

<h3>垂直置齊（vertical-align）</h3>
vertical-align (10.8)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)
Changed By: JinJin
Change Date: February 11, 2012 11:11AM

[列表] 常見跨瀏覽器相容問題整理
<h2>標籤</h2>
<h3>表格標籤(table)</h3>
<h3>清單標籤(ul ol li)</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20001]1.IE瀏覽器瀏覽器下列表式型無效的問題[/url][/color]</b>

<h3>段落標籤 p</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20002]1.段落標籤(p)預設前後邊距問題[/url][/color]</b>

下方產生間隙[/url]</b>
<h3>圖像屬性</h3>

img

<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖像下方產生間隙[/url]</b>
h3>圖像屬性 img</h3>
<h3>圖像標籤 img</h3>
<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 / 6 不支援 PNG 圖片透明背景/url]</b>
像下方產生間隙[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 <h4>圖像下方產生間隙圖片透明背景[/url]</b>

[hr]
<b>[url=4>
http://mepopedia.com/forum/read.php?8172]3.
<h5 / 6 不支援 PNG 圖片透明背景：http[/url]</b>
mepopedia.com/forum/read.php?844,20019

<h4>alt、title使用上的不同</h4>
ALT屬性與tilte屬性於圖像替代文字與信息提示功能的差異：http://mepopedia.com/forum/read.php?844,20172

<h2>屬性</h2>
以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html
<h3>浮動屬性(Float)</h3>

<b>[url=http://vd.mepopedia.com/forum/read.php?844,18331]1.雙倍邊距(Double Margin)問題[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20003]2.在IE中，用了%設定寬度之float多欄式版面會無法正常顯示[/url]</b>


<h3>背景屬性（background）</h3>
background (14.2.1)

background-attachment (14.2.1)

background-color (14.2.1)

background-image (14.2.1)

background-position (14.2.1)

background-repeat (14.2.1)

<h3>邊框屬性（border）</h3>
border (8.5.4)

border-bottom (8.5.4)

border-bottom-color (8.5.2)

border-bottom-style (8.5.3)

border-bottom-width (8.5.1)

border-collapse (17.6)

border-color (8.5.2)

border-left (8.5.4)

border-left-color (8.5.2)

border-left-style (8.5.3)

border-left-width (8.5.1)

border-right (8.5.4)

border-right-color (8.5.2)

border-right-style (8.5.3)

border-right-width (8.5.1)

border-spacing (17.6)

border-style (8.5.3)

border-top (8.5.4)

border-top-color (8.5.2)

border-top-style (8.5.3)

border-top-width (8.5.1)

border-width (8.5.1)



caption-side (17.4.1)

clear (9.5.2)

clip (11.1.2)

color (14.1)

content (12.2)

counter<h3>圖像屬性</h3>

img

<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖像下方產生間隙[/url]</b>

[hr]

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
垂直位置會偏離[/url]</b>
 (12.5)

cursor (18.1)

direction (9.10)

display (9.2.5)

display (17.2)

empty-cells (17.6.1)

float (9.5.1)

[hr]
<h3>文字屬性font</h3>
font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

<b>[url=http://mepopedia.com/forum/read.php?844,20004]1.使用%來設定大小的文字，其顯示狀況會因瀏覽器而異[/url]</b>


[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

font-variant (15.2.3)

font-weight (15.2.3)

height (10.5)

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>


[hr]


list-style-position (12.6.2)

list-style-type (12.6.2)

<h3>邊距（margin）</h3>
margin (8.3)

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

<h3>內距（padding）</h3>
padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

<h3>定位屬性（position）</h3>
position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

<h3>垂直置齊（vertical-align）</h3>
vertical-align (10.8)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)
Changed By: JinJin
Change Date: February 10, 2012 10:40AM

[列表] 常見跨瀏覽器相容問題整理
<h2>標籤</h2>
<h3>表格標籤(table)</h3>
<h3>清單標籤(ul ol li)</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20001]1.IE瀏覽器瀏覽器下列表式型無效的問題[/url][/color]</b>

<h3>段落標籤 p</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20002]1.段落標籤(p)預設前後邊距問題[/url][/color]</b>

h3>圖像屬性 img</h3>
<h3>圖像標籤 img</h3>
<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 / 6 不支援 PNG 圖片透明背景/url]</b>
像下方產生間隙[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 <h4>圖像下方產生間隙圖片透明背景[/url]</b>

[hr]
<b>[url=4>
http://mepopedia.com/forum/read.php?8172]3.
<h5 / 6 不支援 PNG 圖片透明背景：http[/url]</b>
mepopedia.com/forum/read.php?844,20019

<h4>alt、title使用上的不同</h4>
ALT屬性與tilte屬性於圖像替代文字與信息提示功能的差異：http://mepopedia.com/forum/read.php?844,20172

<h2>屬性</h2>
以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html
<h3>浮動屬性(Float)</h3>

<b>[url=http://vd.mepopedia.com/forum/read.php?844,18331]1.雙倍邊距(Double Margin)問題[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20003]2.在IE中，用了%設定寬度之float多欄式版面會無法正常顯示[/url]</b>


<h3>背景屬性（background）</h3>
background (14.2.1)

background-attachment (14.2.1)

background-color (14.2.1)

background-image (14.2.1)

background-position (14.2.1)

background-repeat (14.2.1)

<h3>邊框屬性（border）</h3>
border (8.5.4)

border-bottom (8.5.4)

border-bottom-color (8.5.2)

border-bottom-style (8.5.3)

border-bottom-width (8.5.1)

border-collapse (17.6)

border-color (8.5.2)

border-left (8.5.4)

border-left-color (8.5.2)

border-left-style (8.5.3)

border-left-width (8.5.1)

border-right (8.5.4)

border-right-color (8.5.2)

border-right-style (8.5.3)

border-right-width (8.5.1)

border-spacing (17.6)

border-style (8.5.3)

border-top (8.5.4)

border-top-color (8.5.2)

border-top-style (8.5.3)

border-top-width (8.5.1)

border-width (8.5.1)



caption-side (17.4.1)

cl<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖像下方產生間隙[/url]</b>

img



letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
其垂直位置會偏離[/url]</b>
14.1)

content (12.2)

counter<h3>圖像屬性</h3>

img

<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖像下方產生間隙[/url]</b>

[hr]

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
(12.5)

cursor (18.1)

direction (9.10)

display (9.2.5)

display (17.2)

empty-cells (17.6.1)

float (9.5.1)

[hr]
<h3>文字屬性font</h3>
font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

<b>[url=http://mepopedia.com/forum/read.php?844,20004]1.使用%來設定大小的文字，其顯示狀況會因瀏覽器而異[/url]</b>


[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

font-variant (15.2.3)

font-weight (15.2.3)

height (10.5)

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>


[hr]


list-style-position (12.6.2)

list-style-type (12.6.2)

<h3>邊距（margin）</h3>
margin (8.3)

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

<h3>內距（padding）</h3>
padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

<h3>定位屬性（position）</h3>
position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

<h3>垂直置齊（vertical-align）</h3>
vertical-align (10.8)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)
Changed By: JinJin
Change Date: February 10, 2012 10:39AM

[列表] 常見跨瀏覽器相容問題整理
<h2>標籤</h2>
<h3>表格標籤(table)</h3>
<h3>清單標籤(ul ol li)</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20001]1.IE瀏覽器瀏覽器下列表式型無效的問題[/url][/color]</b>

<h3>段落標籤 p</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20002]1.段落標籤(p)預設前後邊距問題[/url][/color]</b>

h3>圖像屬性 img</h3>
<h3>圖像標籤 img</h3>
<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 / 6 不支援 PNG 圖片透明背景/url]</b>
像下方產生間隙[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 <h4>圖像下方產生間隙圖片透明背景[/url]</b>

[hr]
<b>[url=4>
http://mepopedia.com/forum/read.php?8172]3.
<h5 / 6 不支援 PNG 圖片透明背景：http[/url]</b>
mepopedia.com/forum/read.php?844,20019

<h4>alt、title使用上的不同</h4>
ALT屬性與tilte屬性於圖像替代文字與信息提示功能的差異：http://mepopedia.com/forum/read.php?844,20172

<h2>屬性</h2>
以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html
<h3>浮動屬性(Float)</h3>

<b>[url=http://vd.mepopedia.com/forum/read.php?844,18331]1.雙倍邊距(Double Margin)問題[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20003]2.在IE中，用了%設定寬度之float多欄式版面會無法正常顯示[/url]</b>


<h3>背景屬性（background）</h3>
background (14.2.1)

background-attachment (14.2.1)

background-color (14.2.1)

background-image (14.2.1)

background-position (14.2.1)

background-repeat (14.2.1)

<h3>邊框屬性（border）</h3>
border (8.5.4)

border-bottom (8.5.4)

border-bottom-color (8.5.2)

border-bottom-style (8.5.3)

border-bottom-width (8.5.1)

border-collapse (17.6)

border-color (8.5.2)

border-left (8.5.4)

border-left-color (8.5.2)

border-left-style (8.5.3)

border-left-width (8.5.1)

border-right (8.5.4)

border-right-color (8.5.2)

border-right-style (8.5.3)

border-right-width (8.5.1)

border-spacing (17.6)

border-style (8.5.3)

border-top (8.5.4)

border-top-color (8.5.2)

border-top-style (8.5.3)

border-top-width (8.5.1)

border-width (8.5.1)



caption-siletter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
方產生間隙[/url]</b>

img



letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
14.1)

content (12.2)

counter<h3>圖像屬性</h3>

img

<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖像下方產生間隙[/url]</b>

[hr]

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
(12.5)

cursor (18.1)

direction (9.10)

display (9.2.5)

display (17.2)

empty-cells (17.6.1)

float (9.5.1)

[hr]
<h3>文字屬性font</h3>
font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

<b>[url=http://mepopedia.com/forum/read.php?844,20004]1.使用%來設定大小的文字，其顯示狀況會因瀏覽器而異[/url]</b>


[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

font-variant (15.2.3)

font-weight (15.2.3)

height (10.5)

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>


[hr]


list-style-position (12.6.2)

list-style-type (12.6.2)

<h3>邊距（margin）</h3>
margin (8.3)

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

<h3>內距（padding）</h3>
padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

<h3>定位屬性（position）</h3>
position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

<h3>垂直置齊（vertical-align）</h3>
vertical-align (10.8)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)
Changed By: JinJin
Change Date: February 10, 2012 01:38AM

[列表] 常見跨瀏覽器相容問題整理
<h2>標籤</h2>
<h3>表格標籤(table)</h3>
<h3>清單標籤(ul ol li)</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20001]1.IE瀏覽器瀏覽器下列表式型無效的問題[/url][/color]</b>

<h3>段落標籤 p</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20002]1.段落標籤(p)預設前後邊距問題[/url][/color]</b>

h3>圖像屬性 img</h3>
<h3>圖像標籤 img</h3>
<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 / 6 不支援 PNG 圖片透明背景/url]</b>
像下方產生間隙[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 <h4>圖像下方產生間隙圖片透明背景[/url]</b>

[hr]
<b>[url=4>
http://mepopedia.com/forum/read.php?8172]3.
<h5 / 6 不支援 PNG 圖片透明背景：http[/url]</b>
mepopedia.com/forum/read.php?844,20019

<h4>alt、title使用上的不同</h4>
ALT屬性與tilte屬性於圖像替代文字與信息提示功能的差異：http://mepopedia.com/forum/read.php?844,20172

<h2>屬性</h2>
以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html
<h3>浮動屬性(Float)</h3>

<b>[url=http://vd.mepopedia.com/forum/read.php?844,18331]1.雙倍邊距(Double Margin)問題[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20003]2.在IE中，用了%設定寬度之float多欄式版面會無法正常顯示[/url]</b>


<h3>背景屬性（background）</h3>
background (14.2.1)

background-attachment (14.2.1)

background-color (14.2.1)

background-image (14.2.1)

background-position (14.2.1)

background-repeat (14.2.1)

<h3>邊框屬性（border）</h3>
border (8.5.4)

border-bottom (8.5.4)

border-bottom-color (8.5.2)

border-bottom-style (8.5.3)

border-bottom-width (8.5.1)

border-collapse (17.6)

border-color (8.5.2)

border-left (8.5.4)

border-left-color (8.5.2)

border-left-style (8.5.3)

font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

<b>使用%來設定大小的文字，其顯示狀況會因瀏覽器而異</b>
相異瀏覽器：FF、IE6、IE7、OP

<b>問題描述：</b>
一般瀏覽器的預設字體大小為16像素。
我們雖然可以將文字大小設定為1%~100%，但實際上的顯示大小卻不會以1%為單位進行變化。16像素的文字，以像素為單位在個人電腦的畫面上顯示時，也只能呈現1px~16px共 16個階段的大小，而且設定多少%時會以多少px顯示出來，會因瀏覽器而有所不同，所以我們必須特別注意時計顯示的大小。

目前在CSS中設定文字大小時，使用%為單位做設定的方式已為主流。然而根據設定%值不同，在各瀏覽器中所顯示的大小會有差異，依情況不同，有時可能會造成難以閱讀的狀況。

<b>解決方法</b>：
1)在IE7,FireFox2與Opera9中設定大小為70~75%之文字顯示結果，以文字72%為例，在IE7與Opera9中是以一班較小的文字顯示，但在FireFox2則是使用更小一級的尺寸來顯示，這是相當難以閱讀的尺寸，這種音瀏覽器而造成的文字大小差異，雖然可以在瀏覽器做測試再做最後做修正，但若能先知道離覽器育社大小及對應的%設定值的顯示結果，就可避免設定出產生問題的%值。

<b>參考文章：</b>
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.173-174

[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

border-left-width (8.5.1)

border-right (8.5.4)

border-right-color (8.5.2)

border-right-style (8.5.3)

border-right-width (8.5.1)

border-spacing (17.6)

border-style (8.5.3)

border-top (8.5.4)

border-to<b>將清單項目的開頭符號設為圖像時，其垂直位置會偏離</b>
相異瀏覽器：FF、IE6、IE7、OP

<b>問題描述：</b>
使用list-style-image 屬性，可以設定圖像作為清單項目符號，但在大部份的瀏覽器，不僅會造成文字的垂直位置大幅偏離，更糟的是沒辦法調整該位置，因此目前鮮少使用list-style-image屬性，而是採用li元素的背景圖像來代替。

<b>解決方法</b>：
1)不使用list-style-image屬性，而是將清單的符號設為不顯示，並改用背景圖像來顯示符號的程式碼，利用background-position屬性來調整細部的顯示位置更方便，基本上，只要利用list-style等屬性將清單原本的符號消除，並保留li元素左側用來顯示圖像的padding區域，然後在該處顯示背景圖像即可。例如：

<b>HTML程式碼：</b>
&lt;ul>
&lt;li> 清單項目1&lt;/li>
&lt;li> 清單項目2&lt;/li>
&lt;li> 清單項目3&lt;/li>
&lt;li> 清單項目4&lt;/li>
&lt;/ul>

<b>CSS程式碼</b>
ul{list-style:none;margin:0;padding:0;line-hiegh:1.5;}
li{margin:0;padding:0 0 0 15px;background:url(marker.gif) 0 0.35em no-repead;}

<b>參考文章：</b>
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.180-181
edia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>

6.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
方產生間隙[/url]</b>

img



letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
14.1)

content (12.2)

counter<h3>圖像屬性</h3>

img

<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖像下方產生間隙[/url]</b>

[hr]

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
(12.5)

cursor (18.1)

direction (9.10)

display (9.2.5)

display (17.2)

empty-cells (17.6.1)

float (9.5.1)

[hr]
<h3>文字屬性font</h3>
font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

<b>[url=http://mepopedia.com/forum/read.php?844,20004]1.使用%來設定大小的文字，其顯示狀況會因瀏覽器而異[/url]</b>


[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

font-variant (15.2.3)

font-weight (15.2.3)

height (10.5)

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>


[hr]


list-style-position (12.6.2)

list-style-type (12.6.2)

<h3>邊距（margin）</h3>
margin (8.3)

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

<h3>內距（padding）</h3>
padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

<h3>定位屬性（position）</h3>
position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

<h3>垂直置齊（vertical-align）</h3>
vertical-align (10.8)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)
Changed By: JinJin
Change Date: February 10, 2012 01:32AM

[列表] 常見跨瀏覽器相容問題整理
<h2>標籤</h2>
<h3>表格標籤(table)</h3>
<h3>清單標籤(ul ol li)</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20001]1.IE瀏覽器瀏覽器下列表式型無效的問題[/url][/color]</b>

<h3>段落標籤 p</h3>
<b>[color=#000033][url=http://mepopedia.com/forum/read.php?844,20002]1.段落標籤(p)預設前後邊距問題[/url][/color]</b>

h3>圖像屬性 img</h3>
<h3>圖像標籤 img</h3>
<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.I<b>在IE中，用了%設定寬度之float多欄式版面會無法正常顯示</b>
相異瀏覽器：FF、IE6、IE7、OP

<b>問題描述：</b>
使用float多欄式版面時，若以%為單位來設定所有欄的寬度，則在IE中有能因為瀏覽器視窗寬度不同，造成顯示混亂。
HTML中最後配置的欄位有可能因為視窗的寬度無法顯示到指定位置，於是就跑到其他欄位的下方。
要解決這個問題，一般會將各欄位的寬度設定為合計值比100%少一些，但除此之外也有其他的解決方法。

圖說：
將兩個寬度設為50%的DIV元素以float設為橫向並排，在IE中，根據視窗寬度不同，其中一欄可能會跑到其他欄的下方去。

<b>解決方法</b>：
1)使寬度合計起來比100%小一點。
依IE的版本的不同其臨界值也會不同，不過大致維持在96%以下，顯示起來就不會有問題，左右欄不設為50%，而設為48%的話，就不會發生其中一欄顯示到下方的情況。
但是顯示時在水平方向就會出現4%以上的留白，視版面設計不同，留白若全部在左邊或右邊，看起來會比較顯眼，因此多數網站在雙欄版面中，會將左右方開，一邊設定為float:left，另一邊則設為float:right，把留白放在中間。

2)在父元素中設定1px的padding。
前述的方法，可能造成版面看起來不自然，這時可採用另一種方法，就是將寬度合計為100%，僅加入padding來做處理。
在欄位全體之父元素box中，於和最後設定float之欄位鄰接的那一側，設定1px以上的padding，便可以解決問題。假設在body元素中依序配置了#main以及#sub等兩個div元素，而兩欄均設定為float:lef的話，則只要在body元素中設定：padding-right:1px;，版面就能正常顯示了。

例如：
<b>HTML程式碼：</b>

&lt;body>
&lt;div id="main>
....
&lt;/div>
&lt;div id="sub">
....
&lt;/div>
&lt;/body>

<b>CSS程式碼</b>
body{
padding-right:1px;
}

#main{
float:left;
width:50%
}

#sub{
float:left;
width:50%
}


3)在最後的欄位中設定-1px的margin。
假設在body元素中依序配置了#main以及#sub等兩個div元素，而兩欄均設定為float:right的話，則只要在#sub元素中設定：margin-left:-1px;，版面就能正常顯示了。
反過來，若設定margin-right:-1px;則依瀏覽器的種類及版本不同，有可能出現水平方向的捲軸，此時，可在margin被設定為-1px的元素的父元素中設定 overflow:hidden; ，就可以讓水平方向捲軸不顯示出來。
例如：

<b>HTML程式碼：</b>
&lt;body>
&lt;div id="main>
....
&lt;/div>
&lt;div id="sub">
....
&lt;/div>
&lt;/body>

<b>CSS程式碼</b>
#main{
float:right;
width:50%
}

#sub{
margin-left:-1px;
float:right;
width:50%
}

<b>參考文章：</b>
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.193-196
面會無法正常顯示[/url]</b>

背景/url]</b>
像下方產生間隙[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5 <h4>圖像下方產生間隙圖片透明背景[/url]</b>

[hr]
<b>[url=4>
http://mepopedia.com/forum/read.php?8172]3.
<h5 / 6 不支援 PNG 圖片透明背景：http[/url]</b>
mepopedia.com/forum/read.php?844,20019

<h4>alt、title使用上的不同</h4>
ALT屬性與tilte屬性於圖像替代文字與信息提示功能的差異：http://mepopedia.com/forum/read.php?844,20172

<h2>屬性</h2>
以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html
<h3>浮動屬性(Float)</h3>

<b>[url=http://vd.mepopedia.com/forum/read.php?844,18331]1.雙倍邊距(Double Margin)問題[/url]</b>
<b>[url=http://mepopedia.com/forum/read.php?844,20003]2.在IE中，用了%設定寬度之float多欄式版面會無法正常顯示[/url]</b>


<h3>背景屬性（background）</h3>
background (14.2.1)

background-attachment (14.2.1)

background-color (14.2.1)

background-image (14.2.1)

background-position (14.2.1)

background-repeat (14.2.1)

<h3>邊框屬性（border）</h3>
border (8.5.4)

border-bottom (8.5.4)

border-bottom-color (8.5.2)

border-bottom-style (8.5.3)

border-bottom-width (8.5.1)

border-collapse (17.6)

border-color (8.5.2)

border-left (8.5.4)

border-left-color (8.5.2)

border-left-style (8.5.3)

font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

<b>使用%來設定大小的文字，其顯示狀況會因瀏覽器而異</b>
相異瀏覽器：FF、IE6、IE7、OP

<b>問題描述：</b>
一般瀏覽器的預設字體大小為16像素。
我們雖然可以將文字大小設定為1%~100%，但實際上的顯示大小卻不會以1%為單位進行變化。16像素的文字，以像素為單位在個人電腦的畫面上顯示時，也只能呈現1px~16px共 16個階段的大小，而且設定多少%時會以多少px顯示出來，會因瀏覽器而有所不同，所以我們必須特別注意時計顯示的大小。

目前在CSS中設定文字大小時，使用%為單位做設定的方式已為主流。然而根據設定%值不同，在各瀏覽器中所顯示的大小會有差異，依情況不同，有時可能會造成難以閱讀的狀況。

<b>解決方法</b>：
1)在IE7,FireFox2與Opera9中設定大小為70~75%之文字顯示結果，以文字72%為例，在IE7與Opera9中是以一班較小的文字顯示，但在FireFox2則是使用更小一級的尺寸來顯示，這是相當難以閱讀的尺寸，這種音瀏覽器而造成的文字大小差異，雖然可以在瀏覽器做測試再做最後做修正，但若能先知道離覽器育社大小及對應的%設定值的顯示結果，就可避免設定出產生問題的%值。

<b>參考文章：</b>
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.173-174

[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

border-left-width (8.5.1)

border-right (8.5.4)

border-right-color (8.5.2)

border-right-style (8.5.3)

border-right-width (8.5.1)

border-spacing (17.6)

border-style (8.5.3)

border-top (8.5.4)

border-to<b>將清單項目的開頭符號設為圖像時，其垂直位置會偏離</b>
相異瀏覽器：FF、IE6、IE7、OP

<b>問題描述：</b>
使用list-style-image 屬性，可以設定圖像作為清單項目符號，但在大部份的瀏覽器，不僅會造成文字的垂直位置大幅偏離，更糟的是沒辦法調整該位置，因此目前鮮少使用list-style-image屬性，而是採用li元素的背景圖像來代替。

<b>解決方法</b>：
1)不使用list-style-image屬性，而是將清單的符號設為不顯示，並改用背景圖像來顯示符號的程式碼，利用background-position屬性來調整細部的顯示位置更方便，基本上，只要利用list-style等屬性將清單原本的符號消除，並保留li元素左側用來顯示圖像的padding區域，然後在該處顯示背景圖像即可。例如：

<b>HTML程式碼：</b>
&lt;ul>
&lt;li> 清單項目1&lt;/li>
&lt;li> 清單項目2&lt;/li>
&lt;li> 清單項目3&lt;/li>
&lt;li> 清單項目4&lt;/li>
&lt;/ul>

<b>CSS程式碼</b>
ul{list-style:none;margin:0;padding:0;line-hiegh:1.5;}
li{margin:0;padding:0 0 0 15px;background:url(marker.gif) 0 0.35em no-repead;}

<b>參考文章：</b>
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.180-181
6.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
l<b>雙倍邊距(Double Margin)問題</b>

一般使用margin：間距，會有比較多問題，因此能夠不用就盡量不用，而使用padding：內距， margin的兼容性沒有pading好，但有時候卻又不得不使用。
例如：在IE6中，若使用了float:left之後導致margin-left雙倍邊距

<xmp><div id="sidebar">這裡是sidebar</div>
<div id="mainpage">這裡是mainpage</div>
</xmp>

CSS的設定

<xmp>
#sidebar{
float: left;
border: 3px solid #09C;
width: 200px;
margin-left: 20px;
}

#mainpage{
border: 3px solid #F09;
width: 200px;
float: left;
margin-left: 20px;
}
</xmp>

在Chrome、Firefox、Opera等瀏覽器下時會正常的顯示，但是如果到了IE6下就會出現雙倍邊距。

[hr]

<b>[color=#993300]測試網址：http://mepopedia.com/~jinjin/float/margin2.html[/color]</b>

<b>在IE7以上版本，以及FireFox、GoogleChrome為正常顯示，觀察的效果如下：</b>

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm002.jpg[/IMG]


<b>在IE6出現雙倍邊距的問題</b>

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm003.jpg[/IMG]


<b>解決方法：</b>
只要加入display: inline;即可

<xmp>
#sidebar{
float: left;
border: 3px solid #09C;
width: 200px;
margin-left: 20px;
display: inline;
}

#mainpage{
border: 3px solid #F09;
width: 200px;
float: left;
margin-left: 20px;
}
</xmp>

<b>原理：</b>
這是因為區塊默認的display屬性值是block，當設置了浮動的同時，還設置了區塊外邊距就會出現這種情況。

另外第二個區塊和與旁邊區塊之間就不存在雙倍邊距的BUG。

[hr]

<b>[color=#993300]解決雙倍邊距測試網址：http://mepopedia.com/~jinjin/float/margin2-inline.html[/color]</b>

<b>在IE6以及IE7以上版本、FireFox、GoogleChrome皆為正常顯示，觀察的效果如下：</b>

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm005.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm004.jpg[/IMG]

[hr]
<b>雙倍邊距(Double Margin)問題整理</b>
何種瀏覽器會有問題
[color=#CC0066]IE6[/color]

何種情況會有問題
[color=#CC0066]在IE6中，靠近網頁邊界的部分，若使用了float:left，也設定margin-left，(若使用了float:right，也設定margin-right)就會產生雙倍邊距[/color]

解決方式
[color=#CC0066]加入display: inline[/color]

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

<h3>內距（padding）</h3>
padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

<h3>定位屬性（position）</h3>
position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

<h3>垂直置齊（vertical-align）</h3>
vertical-align (10.8)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)ist-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
方產生間隙[/url]</b>

img



letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
14.1)

content (12.2)

counter<h3>圖像屬性</h3>

img

<b>[url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖像下方產生間隙[/url]</b>

[hr]

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>
(12.5)

cursor (18.1)

direction (9.10)

display (9.2.5)

display (17.2)

empty-cells (17.6.1)

float (9.5.1)

[hr]
<h3>文字屬性font</h3>
font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

<b>[url=http://mepopedia.com/forum/read.php?844,20004]1.使用%來設定大小的文字，其顯示狀況會因瀏覽器而異[/url]</b>


[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

font-variant (15.2.3)

font-weight (15.2.3)

height (10.5)

letter-spacing (16.4)

<h3>行高（line-height）</h3>
line-height (10.8)

<h3>表單風格（list-style）</h3>
list-style (12.6.2)

[hr]
list-style-image (12.6.2)

<b>[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]</b>


[hr]


list-style-position (12.6.2)

list-style-type (12.6.2)

<h3>邊距（margin）</h3>
margin (8.3)

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

<h3>內距（padding）</h3>
padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

<h3>定位屬性（position）</h3>
position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

<h3>垂直置齊（vertical-align）</h3>
vertical-align (10.8)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)
Changed By: JinJin
Change Date: February 09, 2012 02:44PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: February 09, 2012 02:40PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: February 09, 2012 02:39PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: February 09, 2012 02:36PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: February 07, 2012 12:43AM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: February 07, 2012 12:41AM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: February 07, 2012 12:32AM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: February 04, 2012 07:59PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: February 04, 2012 07:57PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: HP
Change Date: February 04, 2012 03:55PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: February 04, 2012 03:27PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: February 04, 2012 03:26PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: HP
Change Date: February 04, 2012 03:26PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: February 04, 2012 03:24PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: HP
Change Date: February 04, 2012 12:40PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: HP
Change Date: January 30, 2012 08:58PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: January 17, 2012 09:12PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: January 17, 2012 09:11PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: January 17, 2012 09:11PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: January 17, 2012 09:10PM

[列表] 常見跨瀏覽器相容問題整理
Changed By: JinJin
Change Date: January 17, 2012 09:07PM

[列表] 常見跨瀏覽器相容問題整理

Original Message

作者: JinJin
Date: January 17, 2012 11:49AM

[列表] 常見跨瀏覽器相容問題整理

Table:表格



Float:浮動



List:列表


b>[color=#996600]問題整理[/color]

IE瀏覽器瀏覽器下列表式型無效的問題


h4

問題說明：

用到了li標籤，發現在IE瀏覽器下li前面默認的實心圓點不顯示，也就> IE瀏覽器瀏覽器下列表式型無效的問題

問題說明：
下列表式型無效的問題
問題說明：
用到了li

解決方法：

解決的方法也很簡單，就是使用增加一個屬性：
標籤，發現在IE瀏覽器下li前面默認的實心圓點不顯示，也就是說list-style-type:disc無效，但是在firefox下確實正常的。
原因

資料來源：

http://www.weste.net/2010/10可能是因為某些浮動設置造成

Table:表格

了li不正常顯示

解決方法：
解決的方法也很簡單，就是使用增加一個屬性：
list-style-position: inside
這樣列表樣​​式類型屬性就生效了。
資料來源：
http://www.weste.net/2010/10-8/72解決方法：
解決的方法也很簡單，就是使用增加一個屬性：
list-style-position: inside
這樣列表樣​​式類型屬性就生效了。

資料來源：
http://www.weste.net/2010/10-8/72876.html
p = 1em」為高度的前邊距 (margin-before)與後邊距 (margin-after)，使得段落間在排版上有一定的區隔。但在IE6與IE7中則沒有此前後的預設邊距。（註：margin-brefore/-after 效果與 margiin-top/-bottom 相似。）

解決方法：
1) 使用 CSS Reset：無論使用時希望或不希望有預設的前後邊距，都可以在共用的 CSS 檔案中設定屬性值。例如：
p {margin: 0;} 或 p {margin: 1em 0;}

參考文章：
http://mepopedia.com/forum/read.php?844,15896,15956#msg-15956
[url=[colob>

浮動屬性(Float)


使用list-style-image 屬性，可以設定圖像作為清單項目符號，但在大部份的瀏覽器，不僅會造成文字的垂直位置大幅偏離，更糟的是沒辦法調整該位置，因此目前鮮少使用list-style-image屬性，而是採用li元素的背景圖像來代替。

解決方法：
1) 不使用list-style-image屬性，而是將清單的符號設為不顯示，並改用背景圖像來顯示符號的程式碼，利用background-position屬秀來調整細部的顯示位置更方便，基本上，只要利用list-style等屬性將清單原本的符號消除，並保留li元素左側用來顯示圖像的padding區域，然後在該處顯示背景圖像即可。例如：

HTML程式碼：
<ul>
  • 清單項目1

  • 清單項目2

  • 清單項目3

  • 清單項目4


    • CSS程式碼
    ul{list-style:none;margin:0;padding:0;line-hiegh:1.5;}
    li{margin:0;padding:0 0 0 15px;background:url(marker.gif) 0 0.35em no-repead;}

    參考文章：
    XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.180-181

    [hr]

    round-color (14.2.1)

    background-image (14.2.1)

    backgro
    round-repeat (14.2.1)

    邊框屬性（border）


    border (8.5.4)

    border-bottom (8.5.4)

    border-bottom-color (8.5.2)

    border-bott (8.5.1)

    border-collapseborder-left-color (8.5.2)

    border-left-style (8.5.3)

    border-left-width (8.5.1)
    >
    [color=#url]
    000033][url=http://mepopedia.com/forum/read.php?8color][/url]
    44,20002]1.段落標籤(p)預

    行高（line-height）


    設前後邊距問題[/url][/color

    清單風格（list-style）


    ]<顯示到下方的情況。
    但是顯示時在方向就會出現4%以上的留白，視版面設計不同，留白若全部在左邊或定圖像作為清單項目符號，但在大部份的瀏覽器，不僅會造成文字的垂直位置大幅偏離，更糟的是沒辦

    邊距（margin）


    調整該位置，因此目前鮮少使用list-style-image屬性，而是採用li元素的背景圖像來代替。

    解決方法：
    1)不使用list-style-image屬性，而是將清單的符號設為不顯示，並改用背景圖像來顯示符號的程式碼，利用backgroun

    最大寬度（max-width）


    d-position屬秀來調整細部的顯示位置更方便，基本上，只要利用lis

    最小寬度（mix-width）


    t-style等屬性將清單原本的符號消除，並保留li元素左側用來顯示圖像的padding區域，然後在該處顯示背景圖像即可。例如：

    HTML程式碼：
    <ul>
    <li> 清單項目1
    <li> 清單項目2
    <li> 清單項目3
    <li> 清單項目4
    </ul>

    CSS程式碼
    ul{list-style:none;margin:0;padding:0;line-hiegh:1.5;}
    li{margin:0;padding:0 0 0 15px;background:url(marker.gif) 0 0.35em no-repead;}
    n>
    ....
    </div>
    <div id="sub">
    ....
    </div>
    </body>

    CSS程式碼
    #main{
    float:right;
    width:50%
    }

    #sub{
    margin-left:-1px;
    float:right;
    width:50%
    }

    參考文章：
    XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.193-196

    背景屬性（background）


    background (14.2.1)

    background-attachment (14.2.1)

    background-color (14.2.1)

    background-image (14.2.1)

    background-position (14.2.1)

    background-repeat (14.2.1)

    邊框屬性（border）


    border (8.5.4)

    border-bottom (8.5.4)

    border-bottom-color (8.5.2)

    border-bottom-style (8.5.3)

    border-bottom-width (8.5.1)

    border-collapse (17.6)

    border-color (8.5.2)

    border-left (8.5.4)

    border-left-color (8.5.2)

    border-left-style (8.5.3)

    border-left-width (8.5.1)

    border-right (8.5.4)

    border-right-color (8.5.2)

    border-right-style (8.5.3)

    bordermargin (8.3)

    margin-bottom (8.3)
    margin-left (8.3)
    margin-right (8.3)
    margin-top (8.3)

    marker-offset (12.6.1)

    max-height (10.7)

    max-width (10.4)

    min-height (10.7)

    min-width (10.4)

    outline (18.4)

    outline-color (18.4)
    outline-style (18.4)
    outline-width (18.4)

    overflow (11.1.1)

    內距（padding）


    padding (8.4)

    padding-bottom (8.4)
    padding-left (8.4)
    padding-right (8.4)
    padding-top (8.4)

    定位屬性（position）


    position (9.3.1)

    top (9.3.2)
    right (9.3.2)
    bottom (9.3.2)
    left (9.3.2)

    quotes (12.4.1)

    table-layout (17.5.2)

    text-align (16.2)
    th (8.5.1)

    border-spacing (17.6)

    border-style (8.5.3將清單項目的開頭符號設為圖像時，其垂直位置會偏離
    )

    border-top (8.5.4)

    border-)

    border-top-width (8.5.1)

    border-width (8.5.1)



    caption-side (17.4.1)

    clear (9.5.2)

    clip (11.1.2)

    color (14.1)

    content (12.2)

    counter-increment (12.5)

    counter-reset (12.5)

    cursor (18.1)

    direction (9.10)

    display (9.2.5)

    display (17.2)

    empty-cells (17.6.1)

    float (9.5.1)

    font (15.2.5)

    font-family (15.2.2)

    font-size (15.2.4)

    font-size-adjust (15.2.4)
    體之父元素box中，於和最後設定float之欄位鄰接的那一側，設定1px以上的padding，便可以解決問題。假設在body元素中依序配置了#main以及#sub等兩個div元素，而兩欄均設定為float:lef的話，則只要在body元素中設定：padding-right:1px;，版面就能正常顯示了。

    例如：
    HTML程式碼：

    <body>
    <div id="main>
    ....
    </div>
    <div id="sub">
    ....
    </div>
    </body>

    CSS程式碼
    body{
    padding-right:1px;
    }

    #main{
    float:left;
    width:50%
    }

    #sub{
    float:left;
    width:50%
    }


    3)在最後的欄位中設定-1px的margin。
    假設在body元素中依序配置了#main以及#sub等兩個div元素，而兩欄均設定為float:right的話，則只要在#sub元1)不使用list-style-image屬性，而是將清單的符號設為不顯示，並改用背景圖像來顯示符號的程式碼，利用background-position屬秀來調整細部的顯示位置更方便，基本上，只要利用list-style等屬性將清單原本的符號消除，並保留li元素左側用來顯示圖像的padding區域，然後在該處顯示背景圖像即可。例如：
    素中設定：margin-left:-1px;，版面就能正常顯示了。
    反過來，若設定margin-right:-1px;則依瀏覽器的種類及版本不同，有可能出現水平方向的捲軸，此時，可在margin被設定為-1px的元素的父元素中設定 overflow:hidden; ，就可以讓水平方向捲軸不顯示出來。
    例如：

    HTML程式碼：
    <body>
    <div id="main>
    ....
    </div>
    <div id="sub">
    ....
    </div>
    </body>

    CSS程式碼
    #main{
    float:right;
    width:50%
    }

    #sub{
    margin-left:-1px;
    float:right;
    width:50%
    }

    參考文章：
    XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.193-196
    背景/url]
    像下方產生間隙[/url]
    [url=http://mepopedia.com/forum/read.php?844,20019]2.IE 5.5

    圖像下方產生間隙圖片透明背景[/url]

    [hr]
    [url=4>
    http://mepopedia.com/forum/read.php?8172]3.

    mepopedia.com/forum/read.php?844,20019

    alt、title使用上的不同


    ALT屬性與tilte屬性於圖像替代文字與信息提示功能的差異：http://mepopedia.com/forum/read.php?844,20172

    屬性


    以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
    參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html

    浮動屬性(Float)



    [url=http://vd.mepopedia.com/forum/read.php?844,18331]1.雙倍邊距(Double Margin)問題[/url]
    [url=http://mepopedia.com/forum/read.php?844,20003]2.在IE中，用了%設定寬度之float多欄式版面會無法正常顯示[/url]


    背景屬性（background）


    background (14.2.1)

    background-attachment (14.2.1)

    background-color (14.2.1)

    background-image (14font (15.2.5)

    font-family (15.2.2)

    font-size (15.2.4)

    font-size-adjust (15.2.4)

    font-stretch (15.2.3)

    font-style (15.2.3)

    font-variant (15.2.3)

    font-weight (15.2.3)

    height (10.5)

    letter-spacing (16.4)

    行高（line-height）


    line-height (10.8)

    表單風格（list-style）


    list-style (12.6.2)

    [hr]
    list-style-image (12.6.2)

    將清單項目的開頭符號設為圖像時，其垂直位置會偏離
    相異瀏覽器：FF、IE6、IE7、OP

    問題描述：
    使用list-style-image 屬性，可以設定圖像作為清單項目符號，但在大部份的瀏覽器，不僅會造成文字的垂直位置大幅偏離，更糟的是沒辦法調整該位置，因此目前鮮少使用list-style-image屬性，而是採用li元素的背景圖像來代替。

    解決方法：
    1)不使用list-style-image屬性，而是將清單的符號設為不顯示，並改用背景圖像來顯示符號的程式碼，利用background-position屬性來調整細部的顯示位置更方便，基本上，只要利用list-style等屬性將清單原本的符號消除，並保留li元素左側用來顯示圖像的padding區域，然後在該處顯示背景圖像即可。例如：

    HTML程式碼：
    <ul>
    <li> 清單項目1</li>
    <li> 清單項目2</li>
    <li> 清單項目3</li>
    <li> 清單項目4</li>
    </ul>

    CSS程式碼
    ul{list-style:none;margin:0;padding:0;line-hiegh:1.5;}
    li{margin:0;padding:0 0 0 15px;background:url(marker.gif) 0 0.35em no-repead;}

    參考文章：
    XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.180-181

    [hr]


    list-style-position (12.6.2)

    list-style-type (12.6.2)

    邊距（margin）


    margin (8.3)

    margin-bottom (8.3)
    margin-left (8.3)
    margin-right (8.3)
    margin-top (8.3)

    marker-offset (12.6.1)

    max-height (10.7)

    max-width (10.4)

    min-height (10.7)

    min-width (10.4)

    outline (18.4)

    outline-color (18.4)
    outline-style (18.4)
    outline-width (18.4)

    overflow (11.1.1)

    內距（padding）


    padding (8.4)

    padding-bottom (8.4)
    padding-left (8.4)
    padding-right (8.4)
    padding-top (8.4)

    定位屬性（position）


    position (9.3.1)
    ckground-position (14.2.1)

    background-repeat (14.2.1)

    邊框屬性（border）


    border (8.5.4)

    border-bottom (8.5.4)

    border-bottom-color (8.5.2)

    border-bottom-style (8.5.3)

    border-bottom-width (8.5.1)

    border-collapse (17.6)

    border-color (8.5.2)

    border-left (8.5.4)

    border-left-color (8.5.2)

    border-left-style (8.5.3)

    font (15.2.5)

    font-family (15.2.2)

    font-size (15.2.4)

    [hr]

    使用%來設定大小的文字，其顯示狀況會因瀏覽器而異
    相異瀏覽器：FF、IE6、IE7、OP

    問題描述：
    一般瀏覽器的預設字體大小為16像素。
    我們雖然可以將文字大小設定為1%~100%，但實際上的顯示大小卻不會以1%為單位進行變化。16像素的文字，以像素為單位在個人電腦的畫面上顯示時，也只能呈現1px~16px共 16個階段的大小，而且設定多少%時會以多少px顯示出來，會因瀏覽器而有所不同，所以我們必須特別注意時計顯示的大小。

    目前在CSS中設定文字大小時，使用%為單位做設定的方式已為主流。然而根據設定%值不同，在各瀏覽器中所顯示的大小會有差異，依情況不同，有時可能會造成難以閱讀的狀況。

    解決方法：
    1)在IE7,FireFox2與Opera9中設定大小為70~75%之文字顯示結果，以文字72%為例，在IE7與Opera9中是以一班較小的文字顯示，但在FireFox2則是使用更小一級的尺寸來顯示，這是相當難以閱讀的尺寸，這種音瀏覽器而造成的文字大小差異，雖然可以在瀏覽器做測試再做最後做修正，但若能先知道離覽器育社大小及對應的%設定值的顯示結果，就可避免設定出產生問題的%值。

    參考文章：
    XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.173-174

    [hr]

    font-size-adjust (15.2.4)

    font-stretch (15.2.3)

    font-style (15.2.3)

    border-left-width (8.5.1)

    border-right (8.5.4)

    border-right-color (8.5.2)

    border-right-style (8.5.3)

    border-right-width (8.5.1)

    border-spacing (17.6)

    border-style (8.5.3)

    border-top (8.5.4)

    border-to將清單項目的開頭符號設為圖像時，其垂直位置會偏離
    相異瀏覽器：FF、IE6、IE7、OP

    問題描述：
    使用list-style-image 屬性，可以設定圖像作為清單項目符號，但在大部份的瀏覽器，不僅會造成文字的垂直位置大幅偏離，更糟的是沒辦法調整該位置，因此目前鮮少使用list-style-image屬性，而是採用li元素的背景圖像來代替。

    解決方法：
    1)不使用list-style-image屬性，而是將清單的符號設為不顯示，並改用背景圖像來顯示符號的程式碼，利用background-position屬性來調整細部的顯示位置更方便，基本上，只要利用list-style等屬性將清單原本的符號消除，並保留li元素左側用來顯示圖像的padding區域，然後在該處顯示背景圖像即可。例如：

    HTML程式碼：
    <ul>
    <li> 清單項目1</li>
    <li> 清單項目2</li>
    <li> 清單項目3</li>
    margin-bottom (8.3)
    margin-left (8.3)
    margin-right (8.3)
    margin-top (8.3)

    marker-offset (12.6.1)

    max-height (10.7)

    max-width (10.4)

    min-height (10.7)

    min-width (10.4)

    outline (18.4)

    outline-color (18.4)
    outline-style (18.4)
    outline-width (18.4)

    overflow (11.1.1)

    內距（padding）


    padding (8.4)

    padding-bottom (8.4)
    padding-left (8.4)
    padding-right (8.4)
    padding-top (8.4)

    定位屬性（position）


    position (9.3.1)

    top (9.3.2)
    right (9.3.2)
    bottom (9.3.2)
    left (9.3.2)

    quotes (12.4.1)

    table-layout (17.5.2)

    text-align (16.2)
    text-decoration (16.3.1)
    text-indent (16.1)
    text-shadow (16.3.2)
    text-transform (16.5)

    unicode-bidi (9.10)

    垂直置齊（vertical-align）


    vertical-align (10.8)

    visibility (11.2)

    white-space (16.6)

    width (10.2)

    word-spacing (16.4)

    z-index (9.9.1)<li> 清單項目4</li>
    </ul>

    CSS程式碼
    ul{list-style:none;margin:0;padding:0;line-hiegh:1.5;}
    li{margin:0;padding:0 0 0 15px;background:url(marker.gif) 0 0.35em no-repead;}

    參考文章：
    XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.180-181
    6.4)

    行高（line-height）


    line-height (10.8)

    表單風格（list-style）


    list-style (12.6.2)

    [hr]
    l雙倍邊距(Double Margin)問題

    一般使用margin：間距，會有比較多問題，因此能夠不用就盡量不用，而使用padding：內距， margin的兼容性沒有pading好，但有時候卻又不得不使用。
    例如：在IE6中，若使用了float:left之後導致margin-left雙倍邊距

    <div id="sidebar">這裡是sidebar</div><br /> <div id="mainpage">這裡是mainpage</div><br />

    CSS的設定

    <br /> #sidebar{<br /> float: left;<br /> border: 3px solid #09C;<br /> width: 200px;<br /> margin-left: 20px;<br /> }<br /> <br /> #mainpage{<br /> border: 3px solid #F09;<br /> width: 200px;<br /> float: left;<br /> margin-left: 20px;<br /> }<br />

    在Chrome、Firefox、Opera等瀏覽器下時會正常的顯示，但是如果到了IE6下就會出現雙倍邊距。

    [hr]

    [color=#993300]測試網址：http://mepopedia.com/~jinjin/float/margin2.html[/color]

    在IE7以上版本，以及FireFox、GoogleChrome為正常顯示，觀察的效果如下：

    [IMG]http://i556.photobucket.com/albums/ss1/whc915/dm002.jpg[/IMG]


    在IE6出現雙倍邊距的問題

    [IMG]http://i556.photobucket.com/albums/ss1/whc915/dm003.jpg[/IMG]


    解決方法：
    只要加入display: inline;即可

    <br /> #sidebar{<br /> float: left;<br /> border: 3px solid #09C;<br /> width: 200px;<br /> margin-left: 20px;<br /> display: inline;<br /> }<br /> <br /> #mainpage{<br /> border: 3px solid #F09;<br /> width: 200px;<br /> float: left;<br /> margin-left: 20px;<br /> }<br />

    原理：
    這是因為區塊默認的display屬性值是block，當設置了浮動的同時，還設置了區塊外邊距就會出現這種情況。

    另外第二個區塊和與旁邊區塊之間就不存在雙倍邊距的BUG。

    [hr]
    1.1 何種瀏覽器會有問題
    [color=#CC0066]1.1.1 IE6[/color]

    1.2 何種情況會有問題
    [color=#CC0066]1.2.1 在IE6中，靠近網頁邊界的部分，若使用了float:left，也設定margin-left，(若使用了float:right，也設定margin-right)就會產生雙倍邊距[/color]

    1.3 解決方式
    [color=#CC0066]1.3.1 加入display: inline[/color]
    margin-bottom (8.3)
    margin-left (8.3)
    margin-right (8.3)
    margin-top (8.3)

    marker-offset (12.6.1)

    max-height (10.7)

    max-width (10.4)

    min-height (10.7)

    min-width (10.4)

    outline (18.4)

    outline-color (18.4)
    outline-style (18.4)
    outline-width (18.4)

    overflow (11.1.1)

    內距（padding）


    padding (8.4)

    padding-bottom (8.4)
    padding-left (8.4)
    padding-right (8.4)
    padding-top (8.4)

    定位屬性（position）


    position (9.3.1)

    top (9.3.2)
    right (9.3.2)
    bottom (9.3.2)
    left (9.3.2)

    quotes (12.4.1)

    table-layout (17.5.2)

    text-align (16.2)
    text-decoration (16.3.1)
    text-indent (16.1)
    text-shadow (16.3.2)
    text-transform (16.5)

    unicode-bidi (9.10)

    垂直置齊（vertical-align）


    vertical-align (10.8)

    visibility (11.2)

    white-space (16.6)

    width (10.2)

    word-spacing (16.4)

    z-index (9.9.1)
    [color=#993300]解決雙倍邊距測試網址：http://mepopedia.com/~jinjin/float/margin2-inline.html[/color]

    在IE6以及IE7以上版本、FireFox、GoogleChrome皆為正常顯示，觀察的效果如下：

    [IMG]http://i556.photobucket.com/albums/ss1/whc915/dm005.jpg[/IMG]

    [IMG]http://i556.photobucket.com/albums/ss1/whc915/dm004.jpg[/IMG]

    [hr]
    雙倍邊距(Double Margin)問題整理
    何種瀏覽器會有問題
    [color=#CC0066]IE6[/color]

    何種情況會有問題
    [color=#CC0066]在IE6中，靠近網頁邊界的部分，若使用了float:left，也設定margin-left，(若使用了float:right，也設定margin-right)就會產生雙倍邊距[/color]

    解決方式
    [color=#CC0066]加入display: inline[/color]

    [hr]

    margin-bottom (8.3)
    margin-left (8.3)
    margin-right (8.3)
    margin-top (8.3)

    marker-offset (12.6.1)

    max-height (10.7)

    max-width (10.4)

    min-height (10.7)

    min-width (10.4)

    outline (18.4)

    outline-color (18.4)
    outline-style (18.4)
    outline-width (18.4)

    overflow (11.1.1)

    內距（padding）


    padding (8.4)

    padding-bottom (8.4)
    padding-left (8.4)
    padding-right (8.4)
    padding-top (8.4)

    定位屬性（position）


    position (9.3.1)

    top (9.3.2)
    right (9.3.2)
    bottom (9.3.2)
    left (9.3.2)

    quotes (12.4.1)

    table-layout (17.5.2)

    text-align (16.2)
    text-decoration (16.3.1)
    text-indent (16.1)
    text-shadow (16.3.2)
    text-transform (16.5)

    unicode-bidi (9.10)

    垂直置齊（vertical-align）


    vertical-align (10.8)

    visibility (11.2)

    white-space (16.6)

    width (10.2)

    word-spacing (16.4)

    z-index (9.9.1)ist-style-image (12.6.2)

    [url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]
    方產生間隙[/url]

    img



    letter-spacing (16.4)

    行高（line-height）


    line-height (10.8)

    表單風格（list-style）


    list-style (12.6.2)

    [hr]
    list-style-image (12.6.2)

    [url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]
    14.1)

    content (12.2)

    counter

    圖像屬性



    img

    [url=http://mepopedia.com/forum/read.php?844,20008,20008]1.圖像下方產生間隙[/url]

    [hr]

    letter-spacing (16.4)

    行高（line-height）


    line-height (10.8)

    表單風格（list-style）


    list-style (12.6.2)

    [hr]
    list-style-image (12.6.2)

    [url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]
    (12.5)

    cursor (18.1)

    direction (9.10)

    display (9.2.5)

    display (17.2)

    empty-cells (17.6.1)

    float (9.5.1)

    [hr]

    文字屬性font


    font (15.2.5)

    font-family (15.2.2)

    font-size (15.2.4)

    [hr]

    [url=http://mepopedia.com/forum/read.php?844,20004]1.使用%來設定大小的文字，其顯示狀況會因瀏覽器而異[/url]


    [hr]

    font-size-adjust (15.2.4)

    font-stretch (15.2.3)

    font-style (15.2.3)

    font-variant (15.2.3)

    font-weight (15.2.3)

    height (10.5)

    letter-spacing (16.4)

    行高（line-height）


    line-height (10.8)

    表單風格（list-style）


    list-style (12.6.2)

    [hr]
    list-style-image (12.6.2)

    [url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]


    [hr]


    list-style-position (12.6.2)

    list-style-type (12.6.2)

    邊距（margin）


    margin (8.3)

    [hr]

    margin-bottom (8.3)
    margin-left (8.3)
    margin-right (8.3)
    margin-top (8.3)

    marker-offset (12.6.1)

    max-height (10.7)

    max-width (10.4)

    min-height (10.7)

    min-width (10.4)

    outline (18.4)

    outline-color (18.4)
    outline-style (18.4)
    outline-width (18.4)

    overflow (11.1.1)

    內距（padding）


    padding (8.4)

    padding-bottom (8.4)
    padding-left (8.4)
    padding-right (8.4)
    padding-top (8.4)

    定位屬性（position）


    position (9.3.1)

    top (9.3.2)
    right (9.3.2)
    bottom (9.3.2)
    left (9.3.2)

    quotes (12.4.1)

    table-layout (17.5.2)

    text-align (16.2)
    text-decoration (16.3.1)
    text-indent (16.1)
    text-shadow (16.3.2)
    text-transform (16.5)

    unicode-bidi (9.10)

    垂直置齊（vertical-align）


    vertical-align (10.8)

    visibility (11.2)

    white-space (16.6)

    width (10.2)

    word-spacing (16.4)

    z-index (9.9.1)