هل تحاول تغيير حجم مربع حوار 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 عليه .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.

نصائح أخرى

قد يكون المغلق عاملا.هل يمكنك تغيير المثال الخاص بك حتى نتمكن من رؤية ورقة الأنماط الخاصة بك؟لقد قمت بتحديث المثال بحيث لا يعتمد على وجود 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