كيف يمكنني وضع معايير العمل فضلا عن المراوغات ؟
https://stackoverflow.com/questions/416094
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
Html التالية يعمل كبيرة بالنسبة لي في فايرفوكس أو IE7/8 (مع أو بدون نمط الوسم)
<!-- Deliberately no DocType to induce Quirks Mode -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
Input.quirks
{
margin: 1px 0px 1px 0px;
border: solid black 1px;
}
</style>
</head>
<body>
Should work in Quirks Mode <br />
<input class="quirks" type="text" style="width: 300px;" /><br />
<input class="quirks" type="text" style="width: 147px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" maxlength="25" style="width: 150px;" /><br />
<input class="quirks" type="text" style="width: 94px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" style="width: 100px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" value="DA8 1DE" style="width: 100px;" />
</body>
</html>
ومع ذلك أنا قلت أن غياب DocType في الجزء العلوي من قال HTML مما تسبب على حد سواء كل المتصفحات للعمل في "المراوغات" واسطة.
أنا قلت هذا أمر سيء.
لقد حاولت عدة DocTypes ولكن لا يمكن العثور على DocType/HTML الجمع الذي ينتج تقديم الصحيح في كل المتصفحات.
أي شيء آخر غير "المراوغات" وضع الأسباب المتصفحات أن تتفاعل بشكل مختلف في محاولة لضبط عرض مربع نص.ويبدو أن يؤدي إلى موقف أين يمكنني تصحيح التعليمات إما FF أو أي وفجأة أخرى سوف تفشل.
بعض التفاصيل...
1.> الهدف هنا هو أن 3 صفوف ينبغي أن تظهر نفس العرض بالضبط عندما المقدمة في كل متصفح.ليس nessecary أن المقدمة الاعراض هي نفسها عبر المتصفحات ، إلا أنها تظهر بشكل صحيح له ما يبرره/alighned داخل كل متصفح.
2.> الصورة المشار إليه هو تثبيت الصورة 3 بكسل و 1 عالية (بديل وهذا من شأنه أيضا أن تكون جيدة)
3.> أنا لا أريد أن أعرض الجداول إذا كان ذلك ممكنا.
يبدو كما لو وضع المراوغات هو الوسيلة الوحيدة التي يتفق جميع المتصفحات.أنا قلق من أن النسخة النهائية من IE8 أو في الواقع في بعض المتصفحات ، المراوغات الوضع لن يكون الافتراضي.
ماذا يجب أن أفعل ؟ كيف تحدد DocType (وربما يغير html) والتي سوف تخلق مظهر متناسق عبر المتصفحات ؟
المحلول
الفرق الرئيسي بين "المراوغات" و "الامتثال للمعايير" وضع مختلف "نموذج الصندوق" الذي يؤدي إلى طرق مختلفة لحساب أحجام بناء على عرض/ارتفاع الحشو ، الهامش الحدود الإعدادات.في الامتثال لمعايير طريقة فعالة العرض والارتفاع من صندوق يتم حسابها بإضافة كل هذه المعايير (يرجى البحث في الإنترنت للحصول على مزيد من التفاصيل).
تم تحديد 1px الحدود أول حقول الإدخال سوف يكون 302px واسعة (300px + 2*1px على الحدود اليسار واليمين).التناقض بين FF و IE لقد ذكرت قد يكون سببه مختلفة "القيم الافتراضية" على "الحشو" الإعداد.أنا مجرد اختبار التعليمات البرمجية الخاصة بك مع DOCTYPE و لا الحشو حقول الإدخال -- كل المتصفحات المقدمة بنفس الطريقة.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
الآن هل الصور:لا تستخدم لهم.كنت لا حاجة إليها.مجرد استخدام حق هامش "3px" على حقول الإدخال عن الفجوة.
input.quirks {
margin: 1px 3px 1px 0px; /* 3px right margin */
border: solid black 1px;
padding: 0px; /* so that IE and FF use the same padding */
}
ثم تفعل الرياضيات لتحديد الصحيح "العرض" الإعدادات بحيث يكون مجموع كل الاعراض (includung الحشو الحدود و الهامش!) في كل صف على قدم المساواة ، على سبيل المثال:
300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px
لاحظ أن "5px" يتكون من 3px-الحق-هامش 2 مرات الحدود (1px).
هناك تذهب.إذا كنت ترغب في استخدام مختلف الحشو أجمل نظرة ويشعر ، تشمل فقط في الحسابات الخاصة بك!
نصائح أخرى
هذا هو مقال ممتاز على الحصول على الخاص بك DOCTYPE الحق:
http://www.alistapart.com/stories/doctype/
لأن المشكلة كانت في معظمها الناجمة عن مختلف القيم الافتراضية في IE و Firefox, كنت قد تكون مهتمة في إعادة تعيين CSS الأنماط الذي يشمل قيم الأشياء مثل الحشو بشكل فعال مسح الإعدادات الافتراضية لكل المتصفح بحيث تجعل كل وبالمثل.
