1

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

如果图像未加载，请在http://beattrack.net/test.php查看现场演示

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

FF正确的css

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

Safari 和 Chrome 的区别

这是相关的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>
4

4 回答 4

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; }​
于 2012-06-07T23:10:29.173 回答
0

添加宽度应该让它工作。

#topbar a.home, #topbar a.name {width : 70px;}
于 2012-06-07T04:32:30.583 回答
0

试试这个：

.divider {
    position:relative;
    top: 7px;
    line-height: 19px;
    border-right: 1px solid #5CCD3E;        
    float: right;
}
于 2012-06-07T06:23:35.823 回答
0

原来这是HTML的问题。

当我从文本后面删除“ ”时，它对我很有用。

  <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-07T23:06:49.817 回答