أوبرا مقابض مسج هو تحريك الأسلوب بطريقة غريبة جدا

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

  •  21-08-2019
  •  | 
  •  

سؤال

لدي القائمة المنسدلة.ارتفاعه المتحركة مع مسج من 5px إلى 130px والعكس بالعكس.

القائمة تعمل بشكل جيد في حين أنه تم فصل عنصر (عندما كنت في تطوير ذلك) ولكن عندما عناصر أخرى ظهرت أوبرا قدمت مفاجأة:

النص البديل http://img12.imageshack.us/img12/9366/menusy.png

لقد حددت الدولة الأولى 1 والثانية 2.الدولة الثالثة يجب أن يكون نفس الأولى ولكن كما ترى فقد "الذيل".

محدث:التعليمات البرمجية المصدر

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="js/jquery.js">
    </script>
    <script type="text/javascript" src="js/script.js">
    </script>
    <script type="text/javascript">
      $(function(){
        init();
      });
    </script>
    <link rel="stylesheet" href="css/styles.css"/>
</head>
<body>
  <div id="side" class="side_outer"> 
        <div class="cn tr"> </div>
        <div class="cn tl"> </div>

        <div class="auth">
          <span class="auth_entr">Click me</span> 
          <div class="auth_fields"> 

          </div>
          <div id="auth_separator"> </div>
        </div>
        <div class="side_inner">
            <div class="cn tr"> </div>
            <div class="cn tl"> </div>
                <div class="side_content">
                    Some content
                </div>   
            <div class="cn br"> </div>
            <div class="cn bl"> </div>
        </div>
        <div class="cn br"> </div>
        <div class="cn bl"> </div>  
  </div>
  <div id="header"> Header</div>
  <div id="central"> Center</div>
</body>
</html>

css:

#header {
  background: red;
  height: 100px;
  margin: 30px 330px 20px 20px;

}

#central {
  background: green;
  height: 150px;
  margin: 20px 330px 20px 20px;
}

#side {
  margin-right: 3%;
  margin-left: 10px;
  margin-top: 30px;
  min-width: 200px;
  float: right;
}

.side_outer {
  padding: 0 10px;
  background: #f2f2cc;
  width: 22%;
  border-bottom-style: dashed;
  border-bottom-width: 2px;
  border-bottom-color: black;
}

.side_inner {
    position:relative;
    overflow:hidden;
    padding: 0 10px;
    background: #accbfa;  
}

.side_outer .cn {
  position: relative;
  width: 20px;
  height: 20px;
}

.side_outer .cn.tr, .side_outer .cn.br {
  float: right;
  left: 10px;
}

.side_outer .cn.tl, .side_outer .cn.bl {
  left: -10px;
}

.auth {
  overflow: hidden;
}

.auth_entr {
  position: relative;
  top: 5px;
  margin-left: 17px;
  padding:  0 5px;
  color:  #1e5ebe;
  cursor: pointer;
}

.auth_fields {
  overflow: hidden;
  height: 5px;
  margin-top: 5px;
}


#auth_separator {
  height: 6px;
  font-size: 2px;
}

.side_content {
  height: 100px;
  padding: 5px 15px;
}

جافا سكريبت:

var auth_state = 1;

function init () {
  $('span.auth_entr').click (function (){
     auth_state = (auth_state + 1) % 2;
     if (auth_state == 1) {
          $('div.auth_fields').animate({height: '5px'},  1000);
     } else {
          $('div.auth_fields').animate({height: '132px'}, 1000);
     }
  });
}

في الواقع لقد حللت المشكلة باستخدام بعض الشوارع السحر (أضفت بيضاء سميكة الحدود إلى الجزء السفلي من القائمة الآن "حكاية" شفافة).ولكن أنا الغريب ما هي المشكلة و هل هناك أي عادي الحل ؟

P. S.آخر العناصر هي في الواقع فارغة divs ثابتة الأبعاد الخلفية.بلدي أوبرا الإصدار 9.5 (أعلم أنه قديم ولكن انها لا تزال شعبية بين جمهور بلدي).

P. P. S.لقد اختبرت ذلك في Opera 9.6 ونفس الخلل حدث.

هل كانت مفيدة؟

المحلول

أنا جربت الكود تحت IE 7 و 8 و FF3 وأنه يعمل بشكل جيد.ومع ذلك ، كما سبق أن أشار إلى أن هناك بالفعل خلل عند تشغيل الرسوم المتحركة في الأوبرا.اختبرته في Opera 9.64 وحصلت على نفس النتائج كما كنت.

لقد بحثت في جوجل و في الأوبرا المنتديات و لا يمكن أن تجد أي إشارة إلى هذا الخطأ معينة.أقرب ما وجدته هو هذا: مسج-التمرير السلس-البق.

قد تضطر إلى إنشاء تذكرة إلى تقرير هذا الخلل مع الأوبرا.

نصائح أخرى

ويمكنك وضع شعبة فارغة بعد <div class="cn bl">، ووضع ذروته، ويقول، 50px (أو كل ما هو كاف)، وهامش أرباحها لنفس، ولكن السلبية القيمة (أي، -50px).

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top