Chrome box model is wrongwhen div display:table!
I made a site with simple instructions let's say:
<html>
<head>
<style type="text/css">
.a120 {
background-image:url('image/back.jpg');
width:1004px;
border: 1px solid #333333;
}
</style>
</head>
<body>
<div class="a120">bfahksbdhabdb</div>
</body>
</html>
*back.jpg is 1004 pixels wide.
And then the crazy thing:
IE8, FF35, Opera9, they all show the div.a120 with a background width of 1004px that matches the width of the div and also a border of 1px on each side.
CHROME, shows me the same, at least initially. I used a floating menu on top of the div.a120 with a width of 1004px and surprise, I realised Chrome did this to div.a120:
|-1px border 开发者_开发百科 -1002px div width- 1px border-|
sum=1004px!!!!
Is this a normal behaviour or am I wrong?
When you use a table instead of a div with display: table the behaviour is obviously a table, but when I use display:table isn't supposed to be just a div with table vew or it becomes a table?
Thanks in advance.
A short example (change the width of the orange panel and you'll see how it covers the black border):
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>gfgfg fds f sdf sdf sd fsd f sd</title>
</head>
<body style="margin:0">
<div style="width:1004px; display: table;margin: 0 auto; border: 1px solid black">
<div style="width:967px; height:16px;background-color: #666666;border:none"><div style="width: 37px; float: right;margin-right:-37px; background-color:#ff3300">gfgfg<br />
fds<br />
f<br />
sdf<br />
sdf<br />
sd<br />
fsd<br />
f<br />
sd<br />
ffsd<br />
s<br />
fsd<br />
f<br />
dsf<br />
d<br />
fsd<br />
f</div>
dasdasdas</div>
<div style="width:967px; display:table">dasdasdas<br />
dgf<br />
sdf<br />
<br />
sdfdf<br />
s<br />
sdf<br />
fds<br />
fsd<br />
<br />
sdf</div>
<div style="width:967px; height:16px;">dasdasdas</div>
</div>
</body>
</html>
If you say display as a common type, it shouldn't have some hybrid fusion of inheritance, it should pick up the display properties of the type; in your case, the border width inclusion properties of a table vs a div.
Tables include the border width in the total in Chrome as opposed to a div which doesn't.
Here is a test with your code (strict doctype), a standard table and a table displaying as a div. You can see the border width inclusion differences this way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>gfgfg fds f sdf sdf sd fsd f sd</title>
</head>
<body style="margin:0">
<div style="width:1004px; display: table;margin: 0 auto; border: 1px solid black;">
<div style="width:967px; height:16px;background-color: #666666;border:none">
<div style="position: relative; width: 37px; float: right;margin-right:-37px; top: 30px;background-color:#ff3300">gfgfg<br />
sdf<br />
f<br />
</div>
Div Displaying as table
</div>
<div style="width:967px; display:table">dasdasdas<br />
dgf<br />
<br />
sdf</div>
<div style="width:967px; height:16px;">dasdasdas</div>
</div>
<table style="width:1004px; margin: 0 auto; border: 1px solid black;">
<tr>
<td style="width:967px; height:16px;background-color: #666666;border:none">
<div style="position: relative; top: 10px;width: 37px; float: right;margin-right:-37px; background-color:#ff3300">gfgfg<br />
ds<br />
f<br />
sdf<br />
</div>
Table displaying as a table
</td>
</tr>
<tr>
<td style="width:967px; display:table">dasdasdas<br />
dgf<br />
sdf<br />
</td>
</tr>
<tr>
<td style="width:967px; height:16px;">dasdasdas</td>
</tr>
</table>
<table style="width:1004px; display: block;margin: 0 auto; border: 1px solid black;">
<tr>
<td style="width:967px; height:16px;background-color: #666666;border:none">
<div style="position: relative; top: 10px;width: 37px; float: right;margin-right:-37px; background-color:#ff3300">gfgfg<br />
asd<br />
f<br />
sdf<br />
</div>
Table displaying as block
</td>
</tr>
<tr>
<td style="width:967px; display:table">dasdasdas<br />
dgf<br />
sdf<br />
</td>
</tr>
<tr>
<td style="width:967px; height:16px;">dasdasdas</td>
</tr>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论