不正確顯示

Question

這裏Unorded名單是有問題的網頁的鏈接：http://www.canning.co.nz/

在IE瀏覽器中，無序列表顯示，每排之間的最小空白。但是，在Firefox中，有更多的空白空間。

我該如何修復這個網頁，以便無論瀏覽器如何瀏覽此頁面，無序列表都顯示在IE中。

我是否需要添加某個文檔類型或使用CSS？

Answer 1

您<p>標籤給每個<li>標籤的餘量，使用

ul li p { 
    margin: 0px; 
} 

，它應該擺脫空白。 （或者只是使用p { margin: 0px }如果你想不管他們從所有<p>標籤刪除列表中的是）

Answer 2

明確從這些<p>標籤去除餘量，以在所有瀏覽器類似的外觀。

p { 
    margin: 0; 
} 

這樣做的原因是，如果瀏覽器沒有提供其他標準樣式表，那麼它將使用標準樣式表。這些樣式表在不同瀏覽器中有所不同，因此您必須明確設置某些值或使用CSS重置樣式（例如，this one by David Walsh）。

Answer 3

使用復位CSS **

Reset.CSS是一個簡單的CSS樣式的集合，其移除並中和HTML元素的不一致的默認樣式。

它只是清除Web瀏覽器的默認值，您不需要再次更改每個元素的這些差異。

//Reset CSS - include this stylesheet in your html page before your main css file 


/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126 
License: none (public domain) 
*/ 

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, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 


/* HTML5 display-role reset for older browsers */ 

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 

body { 
    line-height: 1; 
} 

ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 

blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 

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