مشكلة Css في IE6، عرض div ليس بنفس عرض الأصل

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

  •  06-07-2019
  •  | 
  •  

سؤال

يمكن الخروج المشكلة هنا

DIV#target ليس واسعًا مثل الأصل div IE6، وفقط في IE6.

ويمكنك تعديله سريعًا بالنقر فوق يحرر على أعلى.

بالنسبة لأولئك الذين لا يستطيعون رؤية المحتوى، هنا هو الجزء html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <meta name="verify-v1" content="IWNE8753ok3185rownXmHDc6EZFBP/eMDlHCHUQPaEk=" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />


    <title>51Hired</title>
    <link rel="shortcut icon" href="static/favicon.ico" />
    <link href="style/layout.css" rel="stylesheet" type="text/css" />
    <link href="style/index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="menus">
    <a href="/index.html?edit">EDTI</a>&nbsp;&nbsp;
</div>
<div class="clear"></div>
<div id="body" style="width:850px;border:1px solid blue;">
    <div id="target" style="border:1px solid red;width:100%;margin:0;">
    something
    </div>


    <div class="biankuang mag_t">
      <div class="sub_i_title">
            <a href="/jobs.php" style="float:right;color:#D64F00;margin-right:10px;">More&raquo;&raquo;</a>
            <h2>Hostest jobs</h2>                                                             
      </div>
      <div class="sub_i_b clear">

          <ul class="info">
          <li><span>2009-10-05</span><a class="job-hyperlink" title="\u670d\u88c5\u8bbe\u8ba1\u5e08" href="/jobs/1172/Designer" target="_blank">Designer</a></li><li><span>2009-09-21</span><a class="job-hyperlink" title="\u9500\u552e\u7ecf\u7406" href="/jobs/158/Manager" target="_blank">Manager</a></li><li><span>2009-09-20</span><a class="job-hyperlink" title="\u517c\u804c\u4e1a\u52a1\u7ecf\u7406" href="/jobs/580/Manager" target="_blank">Manager</a></li><li><span>2009-09-21</span><a class="job-hyperlink" title="\u9500\u552e\u4ee3\u8868" href="/jobs/159/SaleRepresentative" target="_blank">Sale Representative</a></li><li><span>2009-10-01</span><a class="job-hyperlink" title="\u4ea7\u54c1\u7814\u53d1\u5de5\u7a0b\u5e08" href="/jobs/744/Engineer" target="_blank">Engineer</a></li><li><span>2009-10-05</span><a class="job-hyperlink" title="\u4e1a\u52a1\u4e3b\u7ba1" href="/jobs/309/Manager" target="_blank">Manager</a></li><li><span>2009-10-05</span><a class="job-hyperlink" title="\u4e1a\u52a1\u7ecf\u7406" href="/jobs/61/Manager" target="_blank">Manager</a></li><li><span>2009-10-05</span><a class="job-hyperlink" title="\u5ba2\u6237\u7ecf\u7406" href="/jobs/228/Customer Manager" target="_blank">Customer Manager</a></li><li><span>2009-10-05</span><a class="job-hyperlink" title="\u9500\u552e\u4ee3\u8868" href="/jobs/242/Sale Representative" target="_blank">Sale Representative</a></li><li><span>2009-10-04</span><a class="job-hyperlink" title="QA\u7ba1\u7406" href="/jobs/288/QA Management" target="_blank">QA Management</a></li>               
          </ul>

      </div>
    </div>


</div>

</body>
</html>
هل كانت مفيدة؟

المحلول

هذا السطر في CSS المرتبط (style/index.css): 

 .sub_i_b ul li{float:left; margin-right:45px; width:350px;}

يجب أن تتغير إلى:

 .sub_i_b ul li{float:left; padding-right:45px; width:350px;}

يقوم الهامش بإخراج الأشياء في IE6 لأنه يتم تطبيقه على خارج عرض المنطقة المحددة ويدفع القسم بأكمله إلى الخارج حيث يكون نمط العرض أعلاه قيد التشغيل div#target لا يستطيع أن يحاسب.

تعمل الحشوة بنفس الطريقة في هذه الحالة وتحافظ على عمل عروضك.

نصائح أخرى

لقد رأيت الصفحة، لكنها الآن فارغة.هل يقوم الأشخاص بتحريره وحذف المحتوى؟

على أي حال، سأضع في اعتباري أن IE يحسب الحدود بشكل مختلف، وهذا يمكن أن يغير العرض الدقيق.هل هذا يجيب علي سؤالك؟

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