Warum hat 150 + 150 nicht gleich 300 in Browsern?

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

  •  03-07-2019
  •  | 
  •  

Frage

Ich habe folgende 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>

Wenn die zweite Reihe von Textfeldern gemacht erscheint kumulativ länger als die 1 in der ersten Reihe zu sein. Dieses trotz expliziter Einstellung von Breiten über das Style-Attribut

Warum passiert und kann ich es vermeiden?

Hinweis: Dies scheint die gleiche sowohl in FF3 und IE7

zu arbeiten
War es hilfreich?

Lösung

jhunter richtig ist, und ich möchte hinzufügen, dass Sie Firebug für FireFox müssen (es ist kostenlos). Sie können dies selbst mit installiert, die schnell herausgefunden haben. Überprüfen Sie das Element, das Sie interessiert sind und Blick auf die Registerkarte „Layout“.

Andere Tipps

Es gibt eine Grenze auf einem Textfeld, das nicht in der Breite enthalten ist.

Tatsächlich ist die Breite Ihrer Frachten sind zwei als Grenze sowohl auf der linken und der rechten Seite (die 1px) bedeutet, gibt es zwei zusätzliche Pixel pro Feld. Also insgesamt sind Sie 6.

Ich würde vorschlagen, CSS Mastery lesen, erklärt es viele der Unterschiede bei den verschiedenen Browser-Box-Modelle und deren Auswirkungen auf das Layout und die Breite des in verschiedenen Browsern.

CSS Mastery

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top