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&amp;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>

来源

2017-05-05 Sepp Hofer

我只是简单地使用表格而不是使用那个javascript。这将自动调整宽度。这是表格数据，所以没有什么问题。 – Johannes

这是从我的页面减去一小段。整个页面响应（引导）并且不使用表格。所以我不想在这里使用表格。 –

好吧，只是因为页面不使用表格，这不是在这种特殊情况下不使用表格的原因。而且，对于这种内容，响应速度并不是什么大问题。 – Johannes

正如我在评论中写道，我会用表，它的简单得多。

可以为那些留在细胞中不同的填充到您的口味。评论后

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&amp;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&amp;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>

来源

2017-05-05 15:27:49 Johannes

OS X/Safari浏览器10.1 /谷歌的字体问题

回答

相关问题