gpt4 book ai didi

CSS 格式化 Chrome 与 Safari

转载 作者:太空宇宙 更新时间:2023-11-04 12:52:21 30 4
gpt4 key购买 nike

我有一个奇怪的格式问题,也许有人可以帮我解决。在 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%;
}

最佳答案

我认为简单的解决方案是在 div.btn-primary 中添加 width:100% 和 display:table ,删除 display: inline-block; 来自 span.title 并更新 height: 0px; in 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

关于CSS 格式化 Chrome 与 Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26071960/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com