المساعدة اللازمة مع doctype

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

  •  19-09-2019
  •  | 
  •  

سؤال

أواجه مشكلة في تصميم موقع الاختبار. عندما أفتح صفحة HTML الخاصة بي مع IE، بدون خط DocType الخاص بي، فإنه يجعل الطريقة التي أعجبني بها، ولكن ليس في FF (بسبب الطريقة التي تفسر الحشوة، من بين أشياء أخرى). عندما أضيف خط DocTyPe، يتم الضغط على الصفحة على ارتفاع حوالي 230 بكسل. نيتي هو ضبط الارتفاع إلى أقصى ارتفاع الصفحة. فيما يلي ملفاتي:

* index.html *

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" /> 
   <!--[if IE]>
  <style type="text/css">
   body {
    text-align: center;
    /* Remove padding: */
    padding: 0;
   }
   #container {
    /* Mind the box model in IE.. */
    height: 100%;
   }
  </style>
  <![endif]-->
</head>  
<body>
<!--[if IE]><div id="container"><![endif]-->
<div class="container">
     <div class="header">  
         <h1>Logo</h1>  
     </div>
     <div class="nav widget-header ">
            <!-- main nav -->
            <a href=""><div class="nav-button state-default " ><img src="a.jpg" alt="a" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="b.jpg" alt="b" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="c.jpg" alt="c" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="d.jpg" alt="d" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="e.jpg" alt="e" /></div></a>
    </div >
    <div class="content">
        <!--content area-->
        <p>content</p>
    </div>
    <div class="footer">
        <!-- footer -->
        <p>&copy; Copyright</p>
     </div>
</div>
<!--[if IE]></div><![endif]-->
</body>
</html>

* STYLESHEET.CSS *

/* reset */
html, body, div, span,   
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
img, ins, kbd, q, s, samp,  
sbutton_cl, strike, strong,   
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
    margin: 0;  
   padding: 0;  
   border: 0;  
   outline: 0;  
   font-size: 100%;
}  
.body{
    line-height: 1;  
    text-align: center;
}

.widget-header {
background:#333333 url(images/bg-state-default.png) repeat-x scroll 50% 50%;;
border:1px solid #333333;
color:#FFFFFF;
font-weight:bold;
}

.state-default {
    background: #CC0000 url(images/button-state-default.png) repeat-x scroll 50% 50%;
    border:1px solid #333333;
    color:#FFFFFF;
    font-weight:bold;
    font-size: 1em;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
}

.container  {

    border: 1px solid #999999;
    margin: 0 auto;
    width: 800px;
    height: 100%;
    background-color:#999999;
}

.header  {
    border: 1px solid #999999;
    height:10%;
    margin-top: 0;
    padding: 10px;
}

.nav{
    border: 1px solid #999999;
    height:10%;
    margin-top: 2%;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

.nav-button {

    float: left;
    height: 100%;
    margin-left: 3px;
    overflow: hidden;
    width: 150px;
}

.content{
    border: 1px solid #999999;
    height:60%;
    margin-top: 4%;
    padding: 10px;
    background-color:#FFFFFF;
}

.footer{
    border: 1px solid #999999;
    height:10%;
    margin-top: 4%;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    background-color: #FFFFFF;
}

ما أحاوله في نهاية المطاف أن أفعله هو تصميم مع العرض الثابت والارتفاع القائم على النسبة المئوية، حيث يتم أيضا النسبة المئوية للأطفال في وضعها في وضعها في آبائهم (أعتقد أن هذه هي الطريقة الصحيحة للتعامل مع دقة الشاشة المختلفة).

سأكون ممتنا للغاية إذا كان بإمكان أي شخص مساعدتي في هذا.

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

المحلول 3

على الرغم من أنني أقدر جهده، إلا أن إجابة ميدر كانت مفيدة، لكنها غير مكتملة منذ أن أرغب في الحصول على تصميم نسبة مئوية. إجابة ديف هي أشبه الإرشادات. أفضل حل لمشكلتي هو شيء مشابه لهذا:http://matthewjamestaylor.com/blog/perfect-3-column.htm.

الآن تم حل مشكلتي، شكرا لك على مساعدتكم.

نصائح أخرى

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{margin:0;padding:0;}
#wrapper { background:red; }
html,body{height:100%;}
#wrapper{min-height:100%;}
</style>
<!--[if IE 6]><style>
#wrapper { height:100%; }
</style><![endif]-->
</head>
<body>
<div id=wrapper>
  <p>Hello from JS Bin</p>

  <p id="hello"></p>
  </div>
</body>
</html>

ليس من الواضح أي إصدار من Explorer الذي تستخدمه (بصرف النظر عن 6)، ولكن min-height هو قراءة كما height بواسطة بعض الإصدارات ...

ومع ذلك - هذه هي الطريقة المهنية (وأسهل طريقة) لبناء HTML / CSS:

  1. التحقق من صحة HTML الخاصة بك (مهم، حيث يمكن ل HTML غير صالح أن يخلط المتصفحات بطرق غير متوقعة!)

  2. احصل عليه يعمل وتبحث كيف تريد في FF؛

  3. أضف تعليقات شرطية ل IE6 و (إذا لزم الأمر) IE7 و 8.

في IE 6 تذكر أن الحشو الخ غير مضافة إلى صندوق، لذلك سوف تقلل أي عرض أو ارتفاع. أيضا، بعض العناصر دون خصائص CSS معينة، على سبيل المثال لا عرض محدد أو ارتفاع (أو auto)، لا الزناد "haslayout" في IE.

قد لا يحل هذا المشكلة مباشرة، لكنني آمل أن يساعد في تعيين الأمور!

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