لا يمكن تعويم اليسار/اليمين للعمل مع div في Internet Explorer

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

سؤال

هنا هو HTML:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title></title>
  </head>
  <body>
    <div align="center">
      <div id="main-header-content" class="content">
        <div class="left">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
          euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
          minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
          aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
          vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
          facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
          luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber 
          tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod 
          mazim placerat facer possim assum.
        </div>
        <div class="right">
          <div class="left">
            <img src="http://www.mywebk9.com/images/question.png" alt="Questions"/>
          </div>
          <div class="right">
            <span class="small-text">Lorem ipsum dolor sit amet</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

وstyles.css:

*
{
  margin: 0;
  padding: 0;
}
body
{
  font-family: Verdana;
  font-size: 8pt;
}
div.content
{
  width: 585px;
}
div#header-content div
{
  padding: 20px;
  text-align: justify;
}
div#main-header-content > div.left
{
  padding-left: 40px;
  padding-right: 7px;
  text-align: justify;
  width: 350px;
}
div#main-header-content > div.right
{
  padding-left: 7px;
  padding-right: 15px;
  width: 165px;
}
div#main-header-content div.right div.left
{
  width: 20px;
}
div#main-header-content div.right div.right
{
  text-align: left;
  width: 142px;
}
div.left
{
  float: left;
}
div.right
{
  float: right;
}
.small-text
{
  font-size: smaller;
}

يعمل هذا بشكل جيد في FF وChrome.يجب أن يكون عمودين، أحدهما به نص والآخر به أيقونة وكمية صغيرة من النص.كيف يمكنني جعل هذا العمل في IE؟لقد جربت div Clear=كلا الأمرين وهذا لا يفعل أي شيء.

التصويت أيضًا لأي شخص يمكنه إعطائي بعض النصائح حول كيفية كتابة الصفحات واستخدام الأنماط التي تعمل عبر FF وChrome وIE >= 7.

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

المحلول

ويمكن أن يكون لديك عدم تحديد نوع مستند وIE وعرض صفحتك في Quirksmode كما appose إلى وضع معايير (أو تقريبا عادي).

وقراءة هذه المادة لمعرفة المزيد:

http://www.quirksmode.org/css/quirksmode.html

ولقد دققت موقع الويب الخاص بك في وضع المعايير وفي IE7 العمود 2 تتصرف كما ينبغي (كما هو الحال في FF وكروم)

نصائح أخرى

يمكنني أن أقترح عدة أشياء على الرغم من أنني لست متأكدًا مما سيساعد إذا كان أي منها سيساعد بالفعل:

  1. ضع DOCTYPE (على سبيل المثال Transitional HTML 4.01) على وثيقتك.وهذا يفرض على IE الدخول في ما يسمى بالوضع "المتوافق مع المعايير" بدلاً من وضع "المراوغات" الملطف؛
  2. لا تعيد استخدام الفصول اليمنى واليسرى بهذه الطريقة.يفرض عليك استخدام المحدد الفرعي الذي هو IE7+ فقط وليس هناك حاجة إليه؛
  3. إذا كان div الخاص بك لا يحتوي على أي شيء سوى العوامات، فسيكون ارتفاعه 0.يمكنك معالجة هذه المشكلة عن طريق وضع div بارتفاع 0 أسفلها بـ "clear:كلاهما" عليه أو "التجاوز:مخفي" على الوالد؛
  4. تخلص من محاذاة = "المركز".هذا ليس معيارا.

فيما يلي هيكل عظمي يجب مراعاته في الاستخدام:

<div id="container">
  <div id="left">Text</div>
  <div id="right">
    <div id="icon">(image)</div>
    <div id="text">(text)</div>
  </div>
</div>

مدموج مع:

html, body, div { padding: 0; margin: 0; border: 0 none; } /* or a proper reset CSS */
#container { margin: 0 auto; width: 585px; overflow: hidden; } /* center */
#left { text-align: justify; width: 350px; float: left; }
#right { width: 235px; float: right; overflow: hidden; }
#icon { float: left; width: 20px; }
#text { float: right; width: 142px; }

وما إلى ذلك وهلم جرا.

والأولى فما استقاموا لكم فاستقيموا تخطي كل 

div#main-header-content > div.left

واستبدالها مع 

div#main-header-content div.left

وكما أنها لا تعمل في IE6.

وثانيا، فما استقاموا لكم فاستقيموا استخدام 

div.right {
    float: left;
}

وأديتيونالي، وأنا سوف تخطي بالتأكيد <div align="center">...</div>، كما تم إهمال ذلك. بدلا من ذلك أود أن إعادة ترتيب div.content إلى 

div.content {
    position: relative;
    width: 585px;
    margin-left: -292px
    left: 50%;
}

والحيلة إلى مركز هي (باستخدام موقف: قريب أو الموقف: المطلق) تحدد وجهة اليسرى إلى نصف العرض، ومن ثم تتحرك الهامش إلى نصف عرض العنصر (حيث 'العنصر' هو العنصر تريد توسيط).

والمغلق تعديل 

div#main-header-content  div.left
    {
      padding-left: 40px;
      padding-right: 7px;
      text-align: justify;
      width: 350px;
    }
    div#main-header-content  div.right
    {
      padding-left: 7px;
      padding-right: 15px;
      width: 165px;
    }

وبدلا من المغلق اور لهذه الدرجة ش محاولة هذا يعمل بشكل جيد في IE و Firefox جدا ..

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