Пытаетесь изменить размер диалогового окна jQuery в IE6?

StackOverflow https://stackoverflow.com/questions/118280

Вопрос

Я думал, что видел сообщение об ошибке по этому поводу на сайте jQuery, но теперь я не могу его найти.Я пытаюсь изменить размер диалогового окна в IE6.Но когда размер элемента изменяется, размер содержимого и строки заголовка не уменьшается.Однако их размер увеличится, если сделать диалоговое окно больше.В результате кнопка закрытия оказывается отрезанной, а содержимое обрезается, если пользователь изменяет размер диалогового окна, чтобы оно было меньше.

Я пробовал обрабатывать событие resizeStop и вручную изменять размер содержимого и заголовка, но это может дать мне странные результаты.Размеры и расположение элементов в области содержимого по-прежнему были отключены.Кроме того, несмотря на то, что я изменяю размер строки заголовка, кнопка закрытия по-прежнему не возвращается в поле зрения.Есть какие-нибудь идеи?Если это ошибка в jQuery-ui, кто-нибудь знает хорошее обходное решение?

<html>
<head>
  <title>Example of IE6 resize issue</title>
  <link rel="stylesheet" type="text/css" href="http://ui.jquery.com/repository/latest/themes/flora/flora.all.css" />
  <script src="http://www.google.com/jsapi"></script>
  <script>        
    google.load("jquery", "1");        
    google.load("jqueryui", "1");        
    google.setOnLoadCallback(        
    function() {                
      $(document).ready(function()        
      {            
        $("#main-dialog").dialog();        
      });    
    });
    </script>
</head>
<body>
    <div id="main-dialog">    
      This is just some simple content that will fill the dialog. This example is    
      sufficient to reproduce the problem in IE6. It does not seem to occur in IE7    
      or FF. I haven't tried with Opera or Safari.
    </div>
</body> 
</html>
Это было полезно?

Решение

Мне удалось найти решение.Если вы добавите стиль переполнение:скрытый к элементу div контейнера диалога (к которому применен css class .ui-dialog-container), тогда все изменяется правильно.Все, что я сделал, это добавил следующее css-правило к теме flora:

.ui-dialog .ui-dialog-container {
  overflow: hidden;
}

Это также можно было бы исправить, выполнив следующее:

if ($.browser.msie && $.browser.version == 6)
{
  $(".ui-dialog-container").css({ overflow: 'hidden' });
}

Это исправило проблему, которую я наблюдал в IE6, и не вызвало никаких проблем в FireFox.

Другие советы

css может быть одним из факторов.Не могли бы вы изменить свой пример, чтобы мы могли видеть вашу таблицу стилей?Я обновил пример, чтобы он не зависел от локального использования jQuery.

<html>
<head>
<title>Example of IE6 resize issue</title>
<link rel="stylesheet" type="text/css" href="?.css" />
<script src="http://www.google.com/jsapi"></script>
<script>
    google.load("jquery", "1");
    google.load("jqueryui", "1");

    google.setOnLoadCallback(
    function() {
        $(document).ready(function()
        {
            $("#main-dialog").dialog();
        });
    });
</script>
</head>
<body>
<div id="main-dialog">
    This is just some simple content that will fill the dialog. This example is
    sufficient to reproduce the problem in IE6. It does not seem to occur in IE7
    or FF. I haven't tried with Opera or Safari.
</div>
</body> 
</html>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top