您的位置：首页 > 其它

width在各个浏览器下的计算方法

2015-10-20 13:45 162 查看

<?xml version="1.0" encoding="UTF-8" ?>

<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>测试DIV的宽度</title>

<style type="text/css">

#container {

/* 左参考线 */

border-left:1px solid #B23AEE;

}

/* 定义各个层的公共属性 */

#div1,#div2,#div3,#div4{

width:200px;

height:50px;

background:#FFE1FF;

margin-bottom:5px;

}

/* 只有width */

#div1{

}

/* 加上border */

#div2{

border-left:10px solid red;

}

/* 加上border和padding */

#div3{

border-left:10px solid red;

padding-left:50px;

}

/* 加上border、padding和margin */

#div4{

border-left:10px solid red;

padding-left:50px;

margin-left:50px;

}

</style>

</head>

<body>

<div id="container">

<div id="div1">

心梦帆影心梦帆影心梦帆影心梦帆影心梦帆影

</div>

<div id="div2">

心梦帆影心梦帆影心梦帆影心梦帆影心梦帆影

</div>

<div id="div3">

心梦帆影心梦帆影心梦帆影心梦帆影心梦帆影

</div>

<div id="div4">

心梦帆影心梦帆影心梦帆影心梦帆影心梦帆影

</div>

</div>

</body>
</html>

测试结果是：

在Firefox、Opera、Google、IE8、IE7

这些浏览器中，宽度的计算公式是：
DIV的宽度 = width + padding + border + margin

在IE6的宽度计算是：
DIV的宽度 = width + margin
而border和padding，是占用了width的位置。

总结：

要做到ie6极以上浏览器的div宽度一致，尽量不用padding和border属性

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航