2012-08-05 37 views
1

窗口頂部邊框,這是我的整個HTML文檔意外填充html文件,從鉻

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     body { 
      margin-left: 0px; 
      margin-top: 0px; 
      background-color: #0ff; 
     } 
    </style> 
</head> 
<body> 
<div style="background-color: #090">some text</div> 
</body> 
</html> 

在谷歌Chrome,div標籤是窗口邊框的填充,某處20-25px,在其他瀏覽器,所有的好,沒有頂部填充div標籤。有人知道爲什麼這個問題在鉻?

+0

你嘗試過'html,body {padding:0;餘量:0; }' – Andy 2012-08-05 15:10:51

+0

我試圖:html,body { \t \t \t \t margin-left:0px; \t \t \t \t margin-top:0px; \t \t \t \t background-color:#0ff; \t \t \t \t padding:0;保證金:0; \t \t \t} 不工作 – 2012-08-05 15:15:15

+0

我沒有看到任何填充??? – 2012-08-05 15:45:44

回答

2

始終使用重置樣式時,你正在做應用的跨瀏覽器,這樣你可以很容易地解決所有的不一致,你可以嘗試一些基本的東西,如:

* { 
    margin: 0; 
    padding: 0; 
} 

或者使用一些其他的「更完整「喜歡這裏的那些解決方案:

例如Eric Meyer’s Reset Styles告訴我們使用方法:

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

希望它能幫助!

+0

過分簡單化的重置是一個壞主意,應該不惜一切代價避免。例如,考慮一個CMS,最終用戶通過所見即所得編輯器輸入HTML。上述CSS重置會從UL和LI元素中刪除邊距和填充。這使得「項目符號列表」在內容區域的左側和外側顯示項目符號。 – thirdender 2012-08-05 15:26:04

+0

我只是使用完全重置的一部分,檢查更新,它是完整的'css',ol,ul {list-style:none;}修復了「子彈列表」顯示。如果您希望獲得更高的一致性,則使用重置跨瀏覽器就像使用白色的新紙張進行繪製而不是使用紙張上的某些擦除紙張。 – Luis 2012-08-05 15:31:17

+0

我關於子彈的觀點仍然存在......當最終用戶點擊所見即所得編輯器中的「項目符號列表」按鈕時,他們期望項目符號出現並被適當地設置樣式。通過'list-style:none;'使它們消失會導致客戶關於「破碎網站」的調用。如果您打算使用重置來簡化樣式,則需要將基本樣式添加到可編輯內容中。或者,查看使用SCSS和'@ extend'來爲最常用的範例創建最小的重置。例如,下面是我自己使用的一個:http://jsfiddle.net/thirdender/mQjJb/ – thirdender 2012-08-05 15:54:26