jquery-ui，模态表单和 IE8答案

【问题标题】：jquery-ui, Modal form and IE8jquery-ui，模态表单和 IE8
【发布时间】：2013-03-17 10:04:16
【问题描述】：

我有一个包含用户数据的表，使用：

jquery-1.9.1.js
jquery-ui-1.10.1.custom.js
and Christian Bach jquery.tablesorter-update
"jquery.tablesorter-update.js"

使用“模态表单”的演示版时，在与表格相同的页面上创建新用户（表格在表格顶部打开），它在 Chrome 和 Safari 中看起来和工作得很好，但在 IE8 中它的来源被扭曲了。

头部片段：

<!-- CSS for table -->
<style type="text/css">
            div#tableBody {
              width: 100%;
              padding: 0.3em;
              font-size:x-small;
            }
            table {
              width: 100%;
            }
            table th {
              padding: 0.3em;
            }
            table th span {
              float:right;
            }
            table tr.odd {
              background-color: #FFFFFF;
              }
              div.ui-datepicker {
                font-size:small;
              }
</style>
<!--  jQuery UI Theme Start-->
    <link href="../css/redmond/jquery-ui-1.10.1.custom.css" rel="stylesheet">
    <script src="../js/jquery-1.9.1.js"></script>
    <script src="../js/jquery-ui-1.10.1.custom.js"></script>
    <script src="../js/jquery.ui.datepicker-sv.js"></script>
<!-- jQuery UI Theme End-->

<!--Christian Bach jquery.tablesorter-update Star-->
<script type="text/javascript" src="../scripts/jquery.tablesorter-update.js"></script>
<!--Christian Bach jquery.tablesorter-update End-->

<script language="JavaScript">
<!--
function DeleteItem(idurl)
{
    go_on = confirm("Are you sure?");
    if (go_on)
    {
        document.location.href=idurl;
    }
}   


// Tablesort

$(document).ready(function() { 
    // call the tablesorter plugin 
    $('#itemTable').tablesorter({ 
        // sort on the first column and third column, order asc 
        locale: 'eu', widgets: ['zebra'], useUI: true
    }); 
});

//-->
</script>

<style>
        body { font-size: 62.5%; }
        label, input { display:block; }
        input.text { margin-bottom:12px; width:95%; padding: .4em; }
        fieldset { padding:0; border:0; margin-top:25px; }
        h1 { font-size: 1.2em; margin: .6em 0; }
        div#users-contain { width: 350px; margin: 20px 0; }
        div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
        div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
        .ui-dialog .ui-state-error { padding: .3em; }
        .validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script>
    $(function() {
        var name = $( "#name" ),
            email = $( "#email" ),

============= 完全从 jquery-ui 模态表单演示中抄袭

有什么建议吗？

【问题讨论】：

标签： php forms jquery-ui modal-dialog ie8-compatibility-mode

【解决方案1】：

我强烈怀疑这个问题更多的是 HTML 和 CSS，而不是 jQuery 所做的任何事情，因为 1.9 是关心旧版本 IE 的最后一个版本。

也就是说，我建议-不仅要解决这个问题，还要解决 IE 错误的任何未来问题-让您查看 reset.css （好吧，在我被石头砸死之前，最好使用这些天来 normalise.css，你可以在这里找到：normalise.css

诚然，这并不能专门解决您的问题，但我会坚持下去，因为这很可能会解决您的问题和任何其他潜在的 IE 问题。

也就是说，我不确定您为什么需要专门设置所有这些宽度，因为桌子会占用任何空间来满足它对宽度的“需求”。

【讨论】：