لماذا 150 + 150 لا تساوي 300 في المتصفحات ؟
سؤال
لدي 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 إتقان ، وهذا ما يفسر الكثير من الخلافات مع متصفح مربع نماذج وكيف أنها تؤثر على تخطيط العرض في مختلف المتصفحات.
لا تنتمي إلى StackOverflow