Firefox和Chrome CSS填充和保證金差異

我遇到了CSS問題。 Firefox中我的圖標下有一個空白，但不是在Chrome中。我對這個問題從何而來非常困惑。Firefox和Chrome CSS填充和保證金差異

火狐頁腳的截圖：http://puu.sh/dqkrp/1ca27fd502.png
鉻頁腳的截圖：http://puu.sh/dqkOw/ea7749b56c.png

<footer> 
    <div id="contact-bar"> 
    ... 
    </div> 
</footer> 

#contact-bar { 
    width:100%; 
    height:auto; 
    float:right; 
    margin-bottom: auto; 
    bottom: 0px; 
    background-color: #000000; 
} 

#contact-bar ul { 
    margin:auto; 
    display: inline-block; 
    list-style-type: none; 
    padding: auto; 
    float:right; 
} 

#contact-bar ul li{ 
    float:right; 
} 

#contact-bar ul li a { 
    text-decoration: none; 
} 

footer { 
     position: fixed; 
     z-index: 9999; 
     clear:both; 
     bottom:0; 
     left:0; 
     width:100%; 
     margin:0px; 
     padding:0px; 
}

來源

2014-12-11 Soubriquet

使用Firefox中的開發工具來檢查元素。當所有其他都失敗時，使用Normalize.css – Rafael 2014-12-11 05:51:52

或使用'* {margin：0; padding：0;}' – 2014-12-11 05:55:11

它可能只是圖像本身。默認情況下，圖像是「display：inline」和「vertical-align：baseline」。這會導致在圖像底部推下圖像父母的間隙。如果這造成間隙，則可以使用'＃contact-bar img {display：block; '使它們成爲塊元素或'＃contact-bar img {vertical-align：middle; }'來改變默認的垂直對齊。 – misterManSam 2014-12-11 06:08:08

我不知道確切的問題是，在Chrome和Firefox頁腳之間的差異，但我頁腳的設置高度爲準確27px，這是圖標的高度，解決問題。

來源

2014-12-11 16:39:25 Soubriquet

每個瀏覽器都有自己的默認樣式。通過把這個在你的CSS文件的最頂端重置他們：

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, em, img, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, time { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
}

來源

2014-12-11 05:54:26 sabaeus

這並沒有改變任何東西。：/ – Soubriquet 2014-12-11 16:02:46

@Soubriquet我無法用你提供的代碼複製你的問題。你能創建一個jsfiddle來展示這個問題嗎？ – sabaeus 2014-12-11 23:44:34

-1

瀏覽器在默認情況下有自己的屬性，有時圖像有邊界在IE一樣，Chrome和mozila適用有margin和padding儘量做到0

ul,li{ 
margin:0px; 
padding:0px; 
}

來源

2014-12-11 06:12:31 nikita

每個瀏覽器都有自己預定義的HTML標籤樣式。由於這個原因，如果我們沒有爲元素指定樣式，那麼不同的瀏覽器可能會有不同的樣式。

克服這個問題的最流行的方法是使用CSS重置樣式表，它將覆蓋瀏覽器的所有默認樣式。然後，我們不再擔心各種瀏覽器中的不同填充和邊距。

據我所知埃裏克·邁爾斯重新造型是復位風格中最流行的

下面是CSS代碼的URL http://meyerweb.com/eric/tools/css/reset/

內容只需複製此頁和將其添加你的CSS。這應該可以解決您的問題。

在仔細觀察你的CSS我認爲還有一個問題，我認爲可能會導致此問題：請更改padding：auto;填充：0像素;像下面

#contact-bar ul { 
    margin:auto; 
    display: inline-block; 
    list-style-type: none; 
    padding:0px !important; 
    float:right; 
}

來源

2014-12-11 07:36:26 Umamaheswaran

剛剛嘗試過，並沒有工作。：/ – Soubriquet 2014-12-11 16:03:15

@Souriquet你可以請嘗試我更新的選項。 auto不是填充屬性的有效值。我認爲如果你發佈完整的標記（只是語義），這將有助於深入研究這個問題，這會更好。 – Umamaheswaran 2014-12-12 05:17:20

這幫了很多。謝謝 – Corrot 2016-12-08 16:09:40

Firefox和Chrome CSS填充和保證金差異

回答

相關問題