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

回答

相关问题