2013-03-17 4 views
1

У меня есть таблица с UserData с помощью:JQuery-щ, Модальные формы и IE8

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

При использовании демо-версию «модальные формы», создать нового пользователя на той же странице, что и таблица (форма открывается ontop of table), он выглядит и отлично работает в 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 модальной формы демо

Любые предложения?

ответ

0

Я сильно подозреваю, что проблема - это больше HTML и CSS, чем все, что делает jQuery, потому что 1.9 - последняя версия, которая заботится о более старых версиях IE.

Это, я бы посоветовал - не только решить эту проблему, но и все будущие проблемы с ошибками IE - для вас, чтобы посмотреть на reset.css (хорошо, прежде чем я забьем камнями до смерти, это лучшая идея пойти с normalise.css в эти дни, которые вы можете найти здесь: normalise.css

По общему признанию, это не касается конкретной проблемы, но я буду придерживаться этого там, потому что это скорее всего устранит вашу проблему и любые другие потенциальные проблемы IE .

Это не означает, что вам нужно специально установить все эти ширины, так как таблица будет занимать все, что может, чтобы удовлетворить ее потребности в ширине.

Смежные вопросы