2010-04-21 70 views
3
.myDiv 
{ 

background-image: url(urltomyimgheader); 

height:100px; 

margin: auto; 

position:relative; 

top:-10px; 

width:600px; 

} 

這是用來顯示標誌一個簡單的div標籤...HTML位置div標籤的絕對頂級

我已經取得了前-10px,使其接觸到瀏覽器的頂部在那裏,除非徽標和頁面之間存在差距。

但是我感覺不好有關使用-10px來定位DIV :(有沒有更好的和跨瀏覽器兼容的解決方案?

回答

3

@Tatu Ulmanen是正確的,這是一個瀏覽器的默認問題。你不應該有要添加負邊距,您只需設置body/html標籤的默認CSS屬性即可。

爲了安全起見,您應該使用CSS重置以擺脫瀏覽器樣式默認值。以下是您可以用來解決問題的代碼。下面是一個很好的CSS重置,你可以從這裏開始添加到所有CSS樣式表的頂部。

html, body { 
padding: 0; 
margin: 0; 
} 

CSS復位: /* *復位/

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, 
    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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } 
    blockquote:before, 
    blockquote:after, 
    q:before, q:after { content: ""; } 
    blockquote, q  { quotes: "" ""; } 
    body    { line-height: 1; color: black; background: white; } 
    caption, th, td  { text-align: left; font-weight: normal; } 
    :focus    { outline: 0; } 
    table    { border-collapse: separate; border-spacing: 0; } 
    ol, ul    { list-style: none; } 
+0

感謝名單了很多! :)從來不知道重置樣式表是重要的:) – 2010-04-21 17:36:52

1

是的,是由瀏覽器的某些元素的默認墊襯產生10px的差距。

body { 
    padding: 0; 
} 

你也可能想看看CSS樣式表復位重置所有瀏覽器的具體設置內容。Here's a good one

+0

感謝名單大肚:)我見過的重置樣式表很多時間,但我才知道現在才重要:) – 2010-04-21 17:37:31