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

1.9 が古いバージョンの IE を扱う最後のバージョンであるため、問題は jQuery が行っていることよりも HTML と CSS にあると強く思います。

そうは言っても、この問題を解決するだけでなく、IE のバグに関する将来の問題を解決するために、reset.css を調べることをお勧めします (わかりました、私が石で死ぬ前に、normalise.css を使用することをお勧めします)。最近では、ここで見つけることができます: normalise.css

確かに、それはあなたの問題に具体的に取り組むわけではありませんが、問題やその他の潜在的なIEの問題を解決する可能性が高いため、そこに貼り付けます.

とはいえ、幅の「ニーズ」を満たすためにテーブルが可能な限りのスペースを占有するため、これらすべての幅を具体的に設定する必要がある理由はわかりません。

于 2013-05-07T10:01:48.533 に答える