OS X/Safari浏览器10.1 /谷歌的字体问题
问题描述：
我的测试场景：几个div的应具有相同的宽度。 这并不在OS X上运行，Safari浏览器10.1版（11603.1.30.0.34） 重装页面和有谷歌字体加载时。OS X/Safari浏览器10.1 /谷歌的字体问题
宽度被打破了。
点击链接一切正常。
请看看：
https://host26.ssl-net.net/f-fuerst_at/same_width_no_font.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Same width WITH FONT</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,600,600i&subset=latin" rel="stylesheet">
<script type="text/javascript" src="themes/mytheme/javascript/jquery-3.1.1.min.js"></script>
<style>
body {
background-color: #fff;
font-family: "Raleway", sans-serif;
}
.samewidth {
background: #FCC;
}
</style>
</head>
<body>
Container 1:<br><br>
<div>
<div>
<div style="display: inline-block; margin-right: 14px;" class="samewidth">telefon: </div>+55 (0)1234567890 <br>
<div style="display: inline-block; margin-right: 14px;" class="samewidth">fax: </div>+55 (0)0987654321 <br>
<div style="display: inline-block; margin-right: 14px;" class="samewidth">Blablablatrallala: </div>+55 (0)24681012 <br>
</div>
</div>
<br><br><br><br><br>
Container 2:<br><br>
<div>
<div>
<div style="display: inline-block; margin-right: 14px;" class="samewidth">telefon: </div>+55 (0)1213141516 <br>
<div style="display: inline-block; margin-right: 14px;" class="samewidth">fax: </div>+55 (0)918171615141 <br>
</div>
</div>
<br><br><br>
<a href="https://host26.ssl-net.net/f-fuerst_at/same_width.html" title="Same">Same Page with Font embedded</a><br>
<a href="https://host26.ssl-net.net/f-fuerst_at/same_width_no_font.html" title="Same">Same Page No Font </a>
<br><br><br>
<div style="float: left; padding: 20px; margin: 20px; border: 1px solid green;">
RIGHT:<br>
<div>
<img src="right.png">
</div>
</div>
<div style="float: left; padding: 20px; margin: 20px; border: 1px solid red;">
WRONG:<br>
<div>
<img src="wrong.png">
</div>
</div>
<script>
$(document).ready(function() {
// SAME WIDTH IN CONTAINER *******************
var container = $('.samewidth').parent().parent();
var maxWidth = 0;
container.each(function(){
var elements = $(this).children().find('.samewidth');
var maxWidth = 0;
elements.each(function(){
if($(this).width() > maxWidth){
maxWidth = $(this).width();
//console.log(maxWidth);
}
});
elements.width(maxWidth +6);
});
//******************************
});
</script>
</body>
</html>
答
正如我在评论中写道，我会用表，它的简单得多。
可以为那些留在细胞中不同的填充到您的口味。评论后
body {
background-color: #fff;
font-family: "Raleway", sans-serif;
}
table {
border-collapse: collapse;
}
td:first-child
{
background-color: #FCC;
padding: 2px 10px 2px 2px;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Same width WITH FONT</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,600,600i&subset=latin" rel="stylesheet">
<script type="text/javascript" src="themes/mytheme/javascript/jquery-3.1.1.min.js"></script>
</head>
<body>
Container 1:<br><br>
<div>
<table>
<tr>
<td>telefon:</td>
<td>+55 (0)1234567890</td>
</tr>
<tr>
<td>fax:</td>
<td>+55 (0)0987654321</td>
</tr>
<tr>
<td>Blablablatrallala:</td>
<td>+55 (0)24681012</td>
</tr>
</table>
</div>
</body>
</html>此外：
在一个小装置，你可以（与媒体查询）只需添加td { display: block; }让他们下面对方：
body {
width: 200px;
background-color: #fff;
font-family: "Raleway", sans-serif;
}
table {
border-collapse: collapse;
}
td {
display: block;
}
td:first-child
{
background-color: #FCC;
padding: 2px 10px 2px 2px;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Same width WITH FONT</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,600,600i&subset=latin" rel="stylesheet">
<script type="text/javascript" src="themes/mytheme/javascript/jquery-3.1.1.min.js"></script>
</head>
<body>
Container 1:<br><br>
<div>
<table>
<tr>
<td>telefon:</td>
<td>+55 (0)1234567890</td>
</tr>
<tr>
<td>fax:</td>
<td>+55 (0)0987654321</td>
</tr>
<tr>
<td>Blablablatrallala:</td>
<td>+55 (0)24681012</td>
</tr>
</table>
</div>
</body>
</html>
我只是简单地使用表格而不是使用那个javascript。这将自动调整宽度。这是表格数据，所以没有什么问题。 – Johannes
这是从我的页面减去一小段。整个页面响应（引导）并且不使用表格。所以我不想在这里使用表格。 –
好吧，只是因为页面不使用表格，这不是在这种特殊情况下不使用表格的原因。而且，对于这种内容，响应速度并不是什么大问题。 – Johannes