2013-02-09 37 views
-1

嘿,我正在一個個人網站開始顯示我的工作,但已經提出了瀏覽器兼容性錯誤。CSS邊框對於一個網站

我有三個容器使用藍圖框架(側欄,標題和內容)。邊欄的右邊我有一個邊框,並且頭部的底部也是一樣的。問題是標題的邊框沒有顯示,我不知道爲什麼。

您可以在jaredsmith.se上看到該網站並查看源代碼,據我所知它似乎只適用於Safari,但似乎無法在Chrome和Firefox上使用。預先感謝您的幫助。

+1

您可以在[小提琴](http://www.jsfiddle.net)中複製您的問題嗎? – Mooseman 2013-02-09 00:28:27

+0

這是因爲這是一個非常簡單的修復程序來查找和更正,而且應該在來這裏之前完成。我建議您查看FireBug,Chrome開發人員工具和IE的F12開發人員工具的用法。它們都允許你選擇一個元素並查看它的CSS。在這種情況下,CSS甚至會突出顯示一個「無效屬性標誌」。 – Malk 2013-02-09 00:32:06

+0

驗證您的文檔和CSS應始終是您調試的第一步。 – cimmanon 2013-02-09 01:03:59

回答

3

「2px」中的2之後有一個空格。刪除它,邊框就會出現。

#header { 
    border-bottom : 2px solid black; 
    margin-bottom : 5%; 
} 

此外,您的文檔類型中有一個錯字。這會導致IE使用怪癖模式。

變化<DOCTYPE html>變爲<!doctype html>

+0

非常感謝,甚至問我感到尷尬。 :/謝謝你的額外建議,我很感激。 – jaredsmith 2013-02-09 00:51:46

+0

沒問題。我甚至無法計算我被這樣愚蠢的事情絆倒的次數。 ;) – 2013-02-09 00:55:30

0

style.css上線30:

border-bottom: 2 px solid black;是無效的。更改爲border-bottom: 2px solid black;