1

FF12 では正しく表示される CSS ファイルがありますが、Safari と Chrome では異なります。

画像が読み込まれない場合は、http: //beattrack.net/test.php でライブ デモをご覧ください。

FF では次のようになります。

FF正しいCSS

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

これを試して：

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

幅を追加すると、機能するはずです。

#topbar a.home, #topbar a.name {width : 70px;}
于 2012-06-07T04:32:30.583 に答える
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 に答える