css div和span在瀏覽器中的顯示方式不同。如何統一？

我有一個在FF12中正確顯示的CSS文件，但它在Safari和Chrome中不同。css div和span在瀏覽器中的顯示方式不同。如何統一？

如果沒有加載圖像，查看您在http://beattrack.net/test.php

這裏進行現場演示的必要內容看起來像在FF：

FF correct css

這裏是在Safari中會發生什麼鉻：

Safari and Chrome difference

這裏是初步認識CSS和HTML：

<style type="text/css"> 
    #topbar p.infotext { 
     float: left; 
     padding-left: 20px; 
     padding-right: 20px; 
     margin-left: 15px; 
     color: #D8DFEA; 
    } 
    #topbar a.name, #topbar a.home { 
     font-weight: bold; 
     margin-top: 4px; 
     line-height: 32px; 
     font-size: 13px; 
     text-align: right; 
     color: #D8DFEA; 
     padding-left: 12px; 
     float: right; 
     text-decoration: none; 
     padding-right: 0px; 
    } 
    .divider { 
     margin-top: 7px; 
     line-height: 19px; 
     border-right: 1px solid #5CCD3E;   
     float: right; 
    } 
</style> 

<html> 
    <div id="topbar"> 
    <a class="home" href="#">Home &nbsp; <span class="divider">&nbsp;</span></a> 
    <a class="name" href="#"><?php echo $first_name . " " . $last_name . " &nbsp; ";?> 
    <span class="divider">&nbsp;</span> 
    </a> 
    </div> 
</html>

來源

2012-06-07 mr.musicman

圖像沒有加載由於某種原因。我會嘗試改變它們。基本上，Safari和Chrome的分頻器太低了。 –

它們適合我。發佈鏈接到網頁或展示問題的頁面的現場演示。 – Blender

http://beattrack.net/test.php現場演示 –

雖然我推薦使用的圖像，而不是跟蹤一個額外的.divider類，這裏是我會怎樣修改您的標記：http://jsfiddle.net/Wexcode/z9Esg/

HTML：

<div id="topbar"> 
    <a href="#"> 
     <strong>Home</strong><span></span> 
    </a><a href="#"> 
     <strong>Adam Wexler</strong><span></span> 
    </a> 
</div>

CSS：

#topbar { text-align: right; } 
#topbar a { 
    padding: 0 0 0 12px; 
    vertical-align: middle; 
    display: inline-block; } 
#topbar strong, #topbar span { 
    vertical-align: middle; 
    display: inline-block; } 
#topbar strong { font-weight: normal; } 
#topbar a:hover strong { text-decoration: underline; } 
#topbar span { 
    background-color: #5CCD3E; 
    height: 19px; 
    width: 1px; 
    margin: 0 0 0 12px; }

來源

2012-06-07 23:10:29 Wex

哇。真棒。這工作得很好。謝謝！ –

當然，如果您有任何問題，請告訴我。 – Wex

添加寬度應該得到它的工作。

#topbar a.home, #topbar a.name {width : 70px;}

來源

2012-06-07 04:32:30

工作很好！唯一的一點是，「名稱」部分實際上是一個變量，我需要寬度可以調整與名稱的長度，所以它看起來正確的懸停（我改變了它頂部）。 –

試試這個：

.divider { 
    position:relative; 
    top: 7px; 
    line-height: 19px; 
    border-right: 1px solid #5CCD3E;   
    float: right; 
}

來源

2012-06-07 06:23:35

似乎不適合我... –

原來這是用HTML的一個問題。

當我去掉了「& NBSP」從文本之後，對我來說真是棒極了。

<div id="topbar"> 
    <a class="home" href="#">Home 
    <span class="divider">&nbsp;</span></a> 
    <a class="name" href="#"> 
    <?php 
    echo $full_name." ".$tel; 
    ?> 
    <span class="divider">&nbsp;</span> 
    </a> 
    </div>

我喜歡任何反饋，爲什麼工作？

來源

2012-06-07 23:06:49

這是因爲您正在'inline'元素內部使用'float'。您可能需要尋找不需要使用'float'的解決方案（例如使用'inline'元素或'background-image'）。參見[我的回答（http://stackoverflow.com/questions/10925475/css-div-and-span-display-differently-in-browsers-how-to-unify/10941116#10941116）一個這樣的替代品。 – Wex

css div和span在瀏覽器中的顯示方式不同。如何統一？

回答

相關問題