我做了一个函数来匹配循环中某些元素的宽度，它们将自己扩展到最大宽度元素。
// Function: Match width
var _so20170704_match_width = function( item ) {
var max_item_width = 0;
item.each(function(index) {
max_item_width = Math.max( max_item_width, parseInt( $(this).width() ) );
});
// might not necessary
// but taking time, to keep the elements' default width intact
// while looping through 'em
setTimeout(function() {
item.width(max_item_width);
}, 100);
}
我这样称呼它：
_so20170704_match_width( $('.match-width') );
它的工作正如预期的那样。
问题
问题是，并非所有页面刷新都可以。在某些页面上刷新.width()以某种方式表现得像是在接受.outerWidth()或类似。因为设置的宽度工作得更宽一些。
通过console.log($(this).width())和console.log(max_item_width)，我得到的值如下所示：
| × | ✓ | +====================+=======+ |this_item： 177 | 152 | |max_width： 177 | 152 | +--------------------+-------+ |this_item： 174 | 150 | |max_width： 177 | 152 | +--------------------+-------+ |this_item： 229 | 196 | |max_width： 229 | 196 | +--------------------+-------+ |this_item： 265 | 232 | |max_width： 265 | 232 | +====================+=======+ |max_width： 265 | 232 | +
=======================+=======+这里，×表示"不工作宽度识别"，✓表示"工作宽度识别"。
为什么在某些页面刷新时，同一元素的.width()会有所不同？如果我按Ctrl+F5清除缓存并刷新，这是一个×.之后，如果我仅使用F5不断刷新页面，那就是✓.我使页面空闲了一段时间，然后按了F5，但这是一个×.
为什么？
我尝试了什么
无论我是否将计算更改为手动计算，它的行为都是一样的：
if( parseInt( $(this).width() ) > max_item_width ) {
max_item_width = parseInt( $(this).width() );
}
我还花时间通过将100替换为1000来设置宽度，但行为是相同的。
编辑：小提琴
jQuery(document).ready(function($) {
// Function: Match width
var _so20170704_match_width = function(item) {
var max_item_width = 0;
item.each(function(index) {
max_item_width = Math.max(max_item_width, parseInt($(this).width()));
});
// might not necessary
// but taking time, to keep the elements' default width intact
// while looping through 'em
setTimeout(function() {
item.width(max_item_width);
}, 100);
}
_so20170704_match_width($('.package-title'));
});*,
:after,
:before {
box-sizing: border-box;
}
body {
font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333;
}
h2 {
margin-top: 20px;
margin-bottom: 10px;
font-weight: 500;
line-height: 1.1;
}
.package-title {
color: #fff;
background-color: #414142;
border: 1px solid #fed307;
border-radius: 10px;
padding: 1px 15px 13px;
display: inline-block;
position: relative;
font-size: 28px;
z-index: 9;
}
.package-subtitle {
display: block;
position: absolute;
bottom: 0;
left: 100px;
padding: 1px 5px;
font-size: 14px;
background-color: #fed307;
color: #414142;
font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
font-weight: 400;
}<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto:700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<article class="package-holder">
<h2 class="package-title">Package 1 Title<span class="package-subtitle">Package 1 Subtitle</span></h2>
</article>
<article class="package-holder">
<h2 class="package-title">Package 2<span class="package-subtitle">Package 2 Subtitle</span></h2>
</article>
<article class="package-holder">
<h2 class="package-title">Package 3 Ttl<span class="package-subtitle">Package 3 Subtitle</span></h2>
</article>
<article class="package-holder">
<h2 class="package-title">Package 4 Title Larger<span class="package-subtitle">Package 4 Subtitle</span></h2>
</article>嫌疑人：嵌入字体
在制作小提琴时，我怀疑字体嵌入可能会导致问题。我尝试了，禁用了代码中的所有@font-face声明，然后当我刷新(以任何方式(时，它的性能非常完美。
所以注意到的问题是：
在缓存清除时，字体嵌入会自行刷新，jQuery 函数会检测默认字体的宽度(宽度：265 使用默认字体确认(。但随后加载了压缩的嵌入式字体，宽度缩小了一点。这就是导致问题的原因。
好的，在按照@MehulJoshi的建议制作小提琴时，我怀疑是嵌入的压缩字体导致了问题。所以我正在寻找一种方法来检查是否加载了所有字体。
在这个StackOverflow线程的帮助下，我更改了以下代码行：
_so20170704_match_width( $('.match-width') );
使用以下代码：
document.fonts.ready.then(function () {
_so20170704_match_width( $('.match-width') );
});
请在使用前阅读随附的 SO 线程。这是一项新功能，适用于Chrome 35 +和Firefox 41 +。
解决问题的方法是：
- 当所有嵌入的字体都准备好时(这是至关重要的(
- 检查宽度
- 获取最大宽度
- 设置最大宽度