不正确显示

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; 
}