سؤال

لدي HTML التالية

<!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" >
<head runat="server">
    <style>
    .box {
        border: solid black 1px;
        padding: 0px;
        margin: 0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
    </form>
</body>
</html>

عندما أصدرت الصف 2 من مربعات النص يبدو أن تراكمي أكثر من 1 في الصف الأول.هذا على الرغم صريح من الاعراض عن طريق سمة نمط

لماذا يحدث هذا و يمكن تجنب ذلك ؟

ملاحظة:ويبدو أن هذا العمل نفسه في كل FF3 و IE7

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

المحلول

jhunter هو الصحيح, و أود أن أضيف أن تحتاج الحرائق فايرفوكس (مجانا).هل يمكن أن يكون حلا لهذا نفسك بسرعة مع تلك المثبتة.تفقد عنصر كنت ترغب في إلقاء نظرة على "تخطيط" علامة التبويب.

نصائح أخرى

هناك حدود على النص ليست مشمولة في العرض.

والواقع أن العرض الخاص بك مربعات +2 الحدود على كل من اليسار واليمين (التي هي 1px) يعني هناك 2 بكسل إضافية في مربع.حتى في المجموع أنت +6.

أقترح قراءة CSS إتقان ، وهذا ما يفسر الكثير من الخلافات مع متصفح مربع نماذج وكيف أنها تؤثر على تخطيط العرض في مختلف المتصفحات.

CSS إتقان

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