Question

我试图在屏幕上动态调整字段大小，但不幸的是我们正在使用IE怪癖模式。 Chrome表现得非常完美，所有内容都按照我的预期准确排列，但是在IE8下，在quirks模式下，计算出的大小会导致屏幕上的最后一个元素换行到下一行。我真的，真的想避免包装到下一行，但理想情况下我希望渲染的输出看起来像在Chrome中。

铬：

Display in Chrome is pixel perfect.

IE：

In IE8 under quirks mode the date picker icon is on the next line down.

部分问题在于＆＃39; dateentry＆＃39; div位于表格单元格中，拉伸至100％。在调整大小之前，这会导致div延伸到表格单元格大小。我们不希望这样，而是希望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>&nbsp;</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>

Answer 1

感觉有点hacky（因为它），但我决定使用高度来确定项目是否正确呈现。它不是很好，我认为可能会有一些陷阱，但它似乎对我有用。

我能够通过检查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 );
        }
    };

Quirks Mode + IE8元素大小计算显得不准确

1 个答案: