ブラウザ間の互換性の幅の問題

Question

this siteはタブレットと電話のスタイリングでブラウザとの互換性があるいくつかの要素の幅にいくつかの問題を与えています。

クラスは基本的に.p_phoneと.p_phone a

.p_phone { 
    font-size: 20px; 
    width: 145px; 
    left: 40%; 
    margin: 0 !important; 
    height: 30px; 
    opacity: 1; 
    top: -4px; 
    text-align: center; 
    color: #fff; 
    position: relative; 
    } 

    .p_phone a { 
    color: #fff; 
    background-color: #1968a1; 
    font-weight: 800; 
    padding: 5px; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    } 

が、それはクロムとオペラにした画像を、であり、このクラスの幅と一致する必要はなく、サファリ、Firefox、およびエッジ上にあります一致しておらず、次の行にブレークします。

.p_call { 
    font-size: 20px !important; 
    top: -13px; 
    left: 40%; 
    width: 145px; 
    margin: 0; 
    background-image: url(http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png); 
    vertical-align: middle; 
    height: 40px; 
    line-height: 40px; 
    text-align: center; 
    position: relative; 
    float: left; 
    padding: 0; 
    } 

幅を150pxに増やすと固定されますが、画像の幅が広すぎます。それはする必要がありますどのように

：

Answer 1

これらのクラスの（このlink provided by youにそれらをチェックしている）を変更してみてください

.textwidget { 
    font-size: 18px; 
    position: relative; 
    width: 160px; 
    margin: auto; 
} 
.p_call { 
    font-size: 20px !important; 
    top: -13px; 
    left: 40%; 
    margin: 0px; 
    background-image: url('http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png'); 
    vertical-align: middle; 
    height: 40px; 
    line-height: 40px; 
    text-align: center; 
    position: absolute; 
    float: left; 
    padding: 0px; 
    width: 100%; 
    background-size: 100%; 
} 
.p_phone { 
    font-size: 20px; 
    margin: 0px !important; 
    height: 30px; 
    opacity: 1; 
    top: 27px; 
    text-align: center; 
    color: #FFF; 
    position: absolute; 
    width: 100%; 
    left: 40%; 
} 
.p_phone a { 
    color: #FFF; 
    background-color: #1968A1; 
    font-weight: 800; 
    padding: 5px; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    display: inline-block; 
    width: 100%; 
} 

p_callクラスに属するdivとp_phoneは、 textwidgetクラスによって正しくラップされていません。したがって、2つの異なる幅を指定する必要があります。textwidgetは両方のクラスをラップするので、同じ幅になります。それが役に立てば幸い。 chromeとfirefoxの両方でテストされています。

Answer 2

.p_phoneのためのあなたのスタイリングブロックにこれを追加してください：

white-space: nowrap;