我正在尝试动态调整屏幕上的字段大小，但不幸的是我们使用的是 IE 怪癖模式。 Chrome 运行完美，一切都按照我的预期排列，但是在 IE8 中，在 quirks 模式下，计算的大小导致屏幕上的最后一个元素换行到下一行。我真的非常想避免换行到下一行，但理想情况下我希望呈现的输出看起来像在 Chrome 中一样。
Chrome:
IE:
部分问题是“dateentry”div 在表格单元格中，该单元格被拉伸(stretch)到 100%。在调整大小发生之前，这会导致 div 拉伸(stretch)到表格单元格大小。我们不希望这样，相反我们希望 div 与它自己的内容一样大。因此，我正在编写一个 javascript 函数来根据它的内容调整 div 的大小。
如何在不破坏 Chrome 的情况下改进 IE 下的宽度计算？为什么在 IE 中大小不正确？
<!-- QUIRKS MODE AHOY! -->
<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
.datefield {
display: inline-block;
padding: 1px;
margin-left: 2px;
border: solid 1px gray;
background: #FFF;
white-space: nowrap;
}
.datefield * {
position: relative;
display: block;
float: left;
margin: 0;
border: 0;
padding: 0;
}
.datefield input {
width: 1.8em;
margin: 0 1px;
font-family: inherit;
background: none;
}
.datefield div {
display: inline-block !important;
width: 5px;
margin-left: 1px;
margin-right: 1px;
}
.datefield .month-mmm {
width: 2.6em;
}
.datefield .year-yyyy {
width: 2.7em;
}
.datefield input:focus {
outline: none;
}
.datefield-error {
background-color: red;
}
.datefield-error input {
background-color: none;
color: white;
}
</style>
<script type="text/javascript">
var logging = false;
var resize = function( parent ) {
// find the border, margin and padding of the div element.
// var width = this.$el.outerWidth(true) - this.$el.width();
var width = 0;
// add up the width of the inner elements including the elements margin.
$.each( parent.children(), function() {
// Having tried using .is(':visible') and failed, I went for the simpler, is display 'none' or not.
if ( $(this).css('display') != 'none' ) {
if ( logging ) console.log( $(this).outerWidth(true), $(this).get(0) );
var w = $(this).outerWidth(true);
width += w;
}
} );
if ( logging ) console.log(width);
if ( logging ) console.log('-----------------------------------------------------');
parent.width(width);
};
$(document).ready( function() {
resize( $('#dateentry') );
} );
</script>
</head>
<body>
<table width="100%">
<tr>
<td>
<div id="dateentry" class="datefield" datepicker="true" minute="" hour="" year="" month="" date="" format="datetime">
<input style="display: block" id=date_value maxLength=2 placeholder="DD" edit="true" view="true" min="1" max="31" maxlength="2">
<div>/</div>
<input id="month_view" class="month-mmm" maxLength="3" placeholder="MMM" edit="false" view="true" maxlength="3">
<input style="display: none" id=month_value class=month-mmm maxLength=2 placeholder="MM" edit="true" view="false" min="1" max="12" maxlength="2">
<div>/</div>
<input style="display: block;" id="year_value" class=year-yyyy maxLength=4 aa_="0" placeholder="YYYY" edit="true" view="true" min="1900" max="2100" maxlength="4">
<div> </div>
<input style="display: none; visibility: hidden" id="datepicker" class="hasDatepicker" type="hidden">
<img style="zoom: 1" class="ui-datepicker-trigger" title="..." alt="..." src="http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" width="16" height="15">
</div>
</td>
</tr>
</table>
</body>
</html>
最佳答案
感觉有点老套(因为确实如此)，但我决定使用高度来确定元素是否正确呈现。它不是很好，我认为可能会有很多陷阱，但它目前似乎对我有用。
我能够通过检查 jQuery 是否使用框模型来确定是否使用怪癖模式(仅限 IE)。然后就是简单的加一个while循环，直到返回目标高度。
var resize = function( parent ) {
parent.width('auto');
var targetHeight = parent.outerHeight(true);
var width = 0;
// add up the width of the inner elements including the elements margin.
$.each( parent.children(), function() {
// Having tried using .is(':visible') and failed, I went for the simpler, is display 'none' or not.
if ( $(this).css('display') != 'none' ) {
var w = $(this).outerWidth(true);
width += w;
}
} );
parent.width( width );
// add an arbitrary amount to the size of the field.
while( !jQuery.support.boxModel && parent.outerHeight(true) > targetHeight ) {
width += 1;
parent.width( width );
}
};
关于javascript - Quirks Mode + IE8 元素大小计算出现不准确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25079723/