html - chrome 最新版本中的格式被破坏

Question

网页中的链接在 chrome 39.0.2171.65 中损坏如下]

但它在 chrome 版本 38.0.2125.122 和所有其他浏览器中工作正常

HTML

<div class="setleft"><a class="button " href="https://example.com"><span>Daily Diary</span></a></div>
<div class="setleft"><a id="tab" class="button " href="https://example.com"><span>Progress</span></a></div>

CSS

button, a.button, input[type='button'], input[type='submit'], input[type='reset'], a.eylog_green_button {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background-color: #EAEAEA;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EAEAEA));
background-image: -webkit-linear-gradient(top, #FFF, #EAEAEA);
background-image: -moz-linear-gradient(top, #ffffff, #eaeaea);
background-image: -ms-linear-gradient(top, #ffffff, #eaeaea);
background-image: -o-linear-gradient(top, #ffffff, #eaeaea);
background-image: linear-gradient(top, #ffffff, #eaeaea);
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#eaeaea); */
border: 1px solid #CCC;
border-bottom-color: #AAA;
border-radius: 2px;
color: #555;
display: inline-block;
font-size: 12px;
font-weight: 700;
margin: 0;
padding: 8px 10px;
text-decoration: none;
text-shadow: 0 1px 0 #FFF;
vertical-align: middle;

}

如果我添加`white-space: nowrap;它工作正常。我的应用程序中的很多地方都存在这个问题。为什么会这样？是这个解决方案还是其他更好的解决方案。

Answer 1

无论如何，我建议使用white-space: nowrap;。如果你不这样做，那么你会说“如果你愿意，你可以换行”但你永远无法确定浏览器何时可能想要换行文本。因此，明确地说“不要包装”将确保您总能得到想要的东西。