Question

我的测试场景：几个div应该具有相同的宽度。这不适用于OS X，safari版本10.1（11603.1.30.0.34） 重新加载页面和 谷歌字体已加载。

宽度被打破。

点击所有链接即可。

请看一下：

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>

Answer 1

正如我在评论中所写，我会使用表格，它更简单。

您可以根据自己的喜好设置不同左侧单元格的填充。

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>

OS X / Safari 10.1 /谷歌字体问题

1 个答案: