Пытаетесь изменить размер диалогового окна jQuery в IE6?
Я думал, что видел отчет об этой ошибке на сайте 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>
Ответы 2
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>
Я смог придумать решение. Если вы добавите стиль переполнение: скрыто к элементу div контейнера диалога (к которому применен класс css .ui-dialog-container), тогда все изменится правильно. Все, что я сделал, это добавил в тему «Флора» правило css следующего содержания:
.ui-dialog .ui-dialog-container {
overflow: hidden;
}
Это также можно исправить, выполнив следующие действия:
if ($.browser.msie && $.browser.version == 6)
{
$(".ui-dialog-container").css({ overflow: 'hidden' });
}
Это устранило проблему, которую я наблюдал в IE6, и не привело к возникновению каких-либо проблем в FireFox.
Я пробовал как position: relative, так и zoom: 1, ни один из них не исправил проблему, например, overflow: hidden.
Это общая проблема с hasLayout? Может ли добавление position: relative или zoom: 1 сделать то же самое?