Question

我有一个奇怪的格式问题，也许有人可以帮助我。在Chrome和Safari中推送它（我在Mac上）

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

Chrome看起来不错： enter image description here

Safari看起来很奇怪（插入符号位于顶部）： enter image description here

Safari似乎很奇怪。 Firefox和IE看起来像Chrome。

代码相对简单（我想）

HTML：

<html>
  <head>
    <link data-require="bootstrap-css@*" 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%;
}

Answer 1

我认为简单的解决方案是在width:100% and display:table中添加div.btn-primary，从display: inline-block;删除span.title并在height: 0px;中更新span.caret。

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

Answer 2

1）你错过了btn课程：

<div class="btn btn-primary">

2）您正在使用bootstrap框架，不要覆盖主要规则，尝试删除您的CSS文件。

Demo

CSS格式化Chrome与Safari

2 个答案: