Question

我有一个可以在FF12中正确显示的CSS文件，但它在Safari和Chrome中有所不同。

如果图片无法加载，请在http://beattrack.net/test.php

查看现场演示

这是FF应该和看起来的样子：

FF correct css

以下是Safari和Chrome中发生的情况：

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>

Answer 1

虽然我建议使用图片而不是添加额外的.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; }

Answer 2

添加宽度应该可以使用它。

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

Answer 3

试试这个：

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

Answer 4

原来这是HTML的问题。

当我从文本中删除“＆amp; 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>

我喜欢任何关于为何起作用的反馈......

css div和span在浏览器中的显示方式不同。如何统一？

4 个答案: