CSS width value = display width of inside?
CSS宽度值=里面的显示宽度?
or
CSS width value = display width of inside + CSS margin-left + CSS margin-right?
CSS宽度值=内部显示宽度+ CSS边距 - 左边+ CSS边距 - 右边?
5 个解决方案
#1
15
You have to make yourself familiar with the CSS Box Model. It explains where padding, margin and border as well as width work.
你必须熟悉CSS Box模型。它解释了填充,边距和边框以及宽度的工作原理。
However do note that different browsers implement this differently: most notably, Internet Explorer has a box model bug (this is infamously present in IE6 -- I am not aware if this has been fixed in IE7 or IE8) that caused the infamous "quirks mode" CSS hack.
但请注意,不同的浏览器实现这一点的方式不同:最值得注意的是,Internet Explorer有一个盒子模型错误(这在IE6中臭名昭着 - 我不知道这是否已在IE7或IE8中修复)导致了臭名昭着的“怪癖模式” “CSS破解。
Briefly stated, Internet Explorer set their box model to include padding in computing the width, as opposed the official standard wherein width should only constitute the content.
简而言之,Internet Explorer将其盒子模型设置为在计算宽度时包括填充,而不是官方标准,其中宽度应仅构成内容。
#2
1
As mentioned by others, the rule of thumb is the CSS box model. This works generally as advertised by browsers such as Opera, Firefox & Safari. Internet Explorer is your exception, where the "width" includes the margins, padding and borders.
正如其他人所说,经验法则是CSS盒子模型。这通常与Opera,Firefox和Safari等浏览器所宣传的一样。 Internet Explorer是您的例外,其中“宽度”包括边距,填充和边框。
There are some great tools out there that visually depict how the browser has rendered the content. For Firefox check out Firebug and for Internet Explorer check out the Developer Toolbar.
有一些很棒的工具可以直观地描述浏览器如何呈现内容。对于Firefox,请查看Firebug,对于Internet Explorer,请查看开发人员工具栏。
#3
0
It not only depends from the browser and version you choose, but also from the doctype of your html document. Internet explorer in "quirks mode" is for example completely different from Internet explorer with doctype XHTML 1.0 Transitional.
它不仅取决于您选择的浏览器和版本,还取决于您的html文档的doctype。例如,“quirks模式”中的Internet Explorer与具有doctype XHTML 1.0 Transitional的Internet Explorer完全不同。
#5
0
I think IE before version 6 incorrectly included borders and padding in width and height. See: Microsoft Admits IE 5 is Messed Up
我认为版本6之前的IE错误地包括宽度和高度的边框和填充。请参阅:Microsoft承认IE 5已陷入困境
#1
15
You have to make yourself familiar with the CSS Box Model. It explains where padding, margin and border as well as width work.
你必须熟悉CSS Box模型。它解释了填充,边距和边框以及宽度的工作原理。
However do note that different browsers implement this differently: most notably, Internet Explorer has a box model bug (this is infamously present in IE6 -- I am not aware if this has been fixed in IE7 or IE8) that caused the infamous "quirks mode" CSS hack.
但请注意,不同的浏览器实现这一点的方式不同:最值得注意的是,Internet Explorer有一个盒子模型错误(这在IE6中臭名昭着 - 我不知道这是否已在IE7或IE8中修复)导致了臭名昭着的“怪癖模式” “CSS破解。
Briefly stated, Internet Explorer set their box model to include padding in computing the width, as opposed the official standard wherein width should only constitute the content.
简而言之,Internet Explorer将其盒子模型设置为在计算宽度时包括填充,而不是官方标准,其中宽度应仅构成内容。
#2
1
As mentioned by others, the rule of thumb is the CSS box model. This works generally as advertised by browsers such as Opera, Firefox & Safari. Internet Explorer is your exception, where the "width" includes the margins, padding and borders.
正如其他人所说,经验法则是CSS盒子模型。这通常与Opera,Firefox和Safari等浏览器所宣传的一样。 Internet Explorer是您的例外,其中“宽度”包括边距,填充和边框。
There are some great tools out there that visually depict how the browser has rendered the content. For Firefox check out Firebug and for Internet Explorer check out the Developer Toolbar.
有一些很棒的工具可以直观地描述浏览器如何呈现内容。对于Firefox,请查看Firebug,对于Internet Explorer,请查看开发人员工具栏。
#3
0
It not only depends from the browser and version you choose, but also from the doctype of your html document. Internet explorer in "quirks mode" is for example completely different from Internet explorer with doctype XHTML 1.0 Transitional.
它不仅取决于您选择的浏览器和版本,还取决于您的html文档的doctype。例如,“quirks模式”中的Internet Explorer与具有doctype XHTML 1.0 Transitional的Internet Explorer完全不同。
#4
#5
0
I think IE before version 6 incorrectly included borders and padding in width and height. See: Microsoft Admits IE 5 is Messed Up
我认为版本6之前的IE错误地包括宽度和高度的边框和填充。请参阅:Microsoft承认IE 5已陷入困境