0
我的測試場景:幾個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>
我只是簡單地使用表格而不是使用那個javascript。這將自動調整寬度。這是表格數據,所以沒有什麼問題。 – Johannes
這是從我的頁面減去一小段。整個頁面響應(引導)並且不使用表格。所以我不想在這裏使用表格。 –
好吧,只是因爲頁面不使用表格,這不是在這種特殊情況下不使用表格的原因。而且,對於這種內容,響應速度並不是什麼大問題。 – Johannes