1

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

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 模态表单演示中完全剽窃

有什么建议么？

4

1 回答 1

0

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

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

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

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

于 2013-05-07T10:01:48.533 回答