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在浏览器中的显示方式不同。如何统一？

回答

相关问题