Firefox中的CSS問題和IE瀏覽器，我不明白爲什麼

Question

我創建一個新的網站作爲學習經驗，我有CSS麻煩。

在Safari和Chrome中它看起來不錯。

在FireFox中，風格是關閉的，我不明白爲什麼。

在IE中，它是可怕的，我的風格大部分是行不通的。

該網站爲：http://6colors.co。

我昨天發佈了，有人推薦在我的樣式表頂部重置CSS。這工作得很好，從那裏我做了一些變化，以獲得它的形狀。 FireFox和IE中的差異無法正常工作我不遵循。

這裏是樣式表：

/* v1.0 | 20080212 */ 

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, font, 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 { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
} 

body { 
    line-height: 2; 
    background-image: url('media/background.png'); 
    width: 90%; 
} 

header { 
    margin-top: 10px; 
    margin-left: 30px; 
    margin-right: auto; 
    width: 70%; 
} 

AppleBlue { color: #009edc; } 
ApplePurple { color: #934e84; } 
AppleRed { color: #c55152; } 
AppleOrange { color: #e19433; } 
AppleYellow { color: #f2be2e; } 
AppleGreen { color: #76b845; } 

PostListing { 
    margin-top: 20px; 
    margin-left: 300px; 
    text-align: left; 
    float: left; 
    width: 70%; 
    border: 1px solid #3F4933; 
    padding-top: 10px; 
    padding-left: 10px; 
    padding-right: 10px; 
    background-image: url('media/transwhite.png'); 
    line-height: 1; 
} 

a { 
    color: #666666; 
    text-decoration: none; 
} 

PostContent { 
    font-size: 18px; 
    font-weight: normal; 
    font-style: italics; 
    color: #666666; 
} 

PostTitle { 
    font-size: 22px; 
    font-style: normal; 
    font-weight: bold; 
    color: #666666; 
} 

PostTitleUnderline { 
    font-size: 22px; 
    font-style: normal; 
    font-weight: bold; 
    color: #666666; 
    text-decoration: underline; 
} 

PostExcerpt { 
    font-size: 14px; 
    font-weight: normal; 
    font-style: italics; 
    color: #666666; 
} 

PostDate { 
    text-align: right; 
    float: right; 
    font-size: 12px; 
    font-weight: normal; 
    font-style: italics; 
    color: #666666; 
} 

ReturnHomeLink { 
    text-align: right; 
    float: right; 
    font-size: 12px; 
    font-weight: normal; 
    font-style: italics; 
    color: #666666; 
} 

BoxHouse { 
    margin-left: 72px; 
    margin-right: 20px; 
} 

FloatingBox { 
    text-align: center; 
    float: left; 
    width: 220px; 
    border: 1px solid #3F4933; 
    padding: 12px; 
    background-image: url('media/transwhite.png'); 
    margin-top: 10px; 
    margin-left: 0.5em; 
    margin-right: 5px; 
    font-size: 22px; 
    font-style: normal; 
    font-weight: bold; 
} 

Answer 1

您正在使用非HTML元素，如<FloatingBox>和<AppleBlue>，其迷惑Firefox的HTML解析器（也可能是IE）。例如，如果您查看Firebug中的解析樹，您將看到嵌套在<FloatingBox>內的大多數元素都不會被解析爲嵌套在其中。

我建議只使用標準的HTML元素。如果要純粹爲了設置CSS屬性（例如<FloatingBox>和<AppleBlue>）而添加元素，則應使用<div>（對於塊級元素）和<span>（對於內聯元素）標記，並在其上具有class屬性。例如，在你的HTML：

<div class="FloatingBox"> 
    ... 
    <span class="AppleBlue">Blog</a> 
</div> 

而在你的CSS

.FloatinBox { 
    ... 
} 

.AppleBlue { 

} 

Answer 2

第一：有些問題可能是由於到一個無效的DOCTYPE標籤......你是< DOCTYPE HTML >，但你應該確切地規定什麼標準的瀏覽器應該堅持！否則瀏覽器將進入它的「怪癖」模式，在這種模式下它們都呈現不同的效果。

試試這個：

< DOCTYPE HTML PUBLIC " - // W3C // DTD XHTML 1.0過渡// EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;！

瞭解更多關於文檔類型在這裏：

http://www.w3.org/QA/2002/04/valid-dtd-list.html

其次，floatingbox的CSS應該.floatingbox {/ somecss /} - 在" floatingbox "前面的點表示，這是一個類。然後，類是有線到一個HTML元素這樣的：" floatingbox " > {somecontent寫入} LT < DIV類=;/DIV >