CSS格式化Chrome與Safari

我有一個奇怪的格式問題，也許有人可以幫助我。在Chrome和Safari拉這件事（我在Mac）CSS格式化Chrome與Safari

http://plnkr.co/edit/nzTsbKjAgmLo7cJOwzEu?p=preview

鉻看起來不錯： enter image description here

Safari瀏覽器看起來很奇怪（插入符號是位於頂部）： enter image description here

野生動物園似乎是奇怪的一個。 Firefox和IE看起來像Chrome。

代碼是相對簡單的（我認爲）

HTML：

<html> 
    <head> 
    <link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="style.css" /> 
    </head> 

    <body> 
    <div class=" btn-primary"> 
     <span class="title"> 
      test 
     </span> 
     <span class="caret"></span> 
    </div> 
    </body> 
</html>

CSS：

div.btn-primary { 
    height: 40px ; 
    padding: 0px ; 
    line-height: 40px ; 
} 
span.title { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: inline-block; 
} 
span.caret { 
    height: 100%; 
}

來源

2014-09-27 Jason

你有沒有試圖改變你的'垂直align'爲'bottom'？ – rnevius 2014-09-27 06:38:33

我認爲簡單的解決辦法就是添加width:100% and display:table在div.btn-primary，從span.title刪除display: inline-block;和更新span.caretheight: 0px;。

div.btn-primary { 
height: 40px ; 
padding: 0px ; 
line-height: 40px ; 
display:table; 
width:100%; 
} 
span.title { 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
    /* display: inline-block;*/ 
} 
span.caret { 
    height: 0px; 
}

Demo

來源

2014-09-27 06:42:49 Sarju

1）你錯過了btn類：

<div class="btn btn-primary">

2）您正在使用引導框架，請勿覆蓋主要規則，請嘗試刪除您的CSS文件。

Demo。

來源

2014-09-27 06:35:56 dashtinejad

CSS格式化Chrome與Safari

回答

相關問題