软讯网络 > 网站建设 > ASP > 让Mozilla计算容器尺寸的方法与IE相同------mozilla的CSS参考之 -moz-box-sizing

【标题】：让Mozilla计算容器尺寸的方法与IE相同------mozilla的CSS参考之 -moz-box-sizing
【关键字】：Mozilla,IE,------mozilla,CSS,-moz-box-sizing
【来源】：http://blog.csdn.net/BlueDestiny/archive/2006/06/08/779417.aspx

让Mozilla计算容器尺寸的方法与IE相同------mozilla的CSS参考之 -moz-box-sizing

这是一个非常常用的CSS。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> -moz-box-sizing - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="never-online, blueDestiny">
<META NAME="Keywords" CONTENT="never-online, blueDestiny">
<META NAME="Description" CONTENT="http://www.never-online.net">
<style>
body, pre
{
font-size: 0.9em;
font-family: verdana;
line-height: 150%;
}
.copyright
{
text-align: center;
font-size: 1em;
}
.box-size
{
border: 20px #999 solid;
background: #fff;
display: block;
width: 300px;
height: 400px;
padding: 10px;
overflow: -moz-scrollbars-none;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var g_ie = (document.all) ? true : false;
if (!g_ie) window.addEventListener("load", fnBoxSize, false);
else window.attachEvent("onload", function() { var element = document.getElementById("div_boxSize");alert("容器的offsetHeight = " +element.offsetHeight+ "\n\n容器的offsetWidth = " +element.offsetWidth) });
function fnBoxSize(val) {
	if (!g_ie) {
		var element = document.getElementById("div_boxSize");
		if (val) {
			element.style.MozBoxSizing = val;
		} else {
			element.className = "box-size";
		}
		alert("容器的offsetHeight = " +element.offsetHeight+ "\n\n容器的offsetWidth = " +element.offsetWidth)
	} else {
		alert("please using mozilla browser");
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1> Mozilla -moz-box-sizing CSS </h1>
<h4> Notes: </h4>
<h5>
有的时候发现IE和mozilla计算Element的时候，会有很多不同的地方，此属性就是用于指定计算元素高度和宽度的一个方法。<br/>
参看下面的示例，你会更清楚一些。
</h5>
<h4> CSS 语法： </h4><h5> -moz-box-sizing: content-box | border-box | padding-box; </h5>
<h4> DHTML 语法： </h4><h5> obj.style.MozBoxSizing: "content-box" | "border-box" | "padding-box"; </h5>
<h4> 说明：</h4>
<h5> content-box = 容器的实际 宽（高）+ border + padding (Default. 默认值)</h5>
<h5> border-box = 容器的实际 宽（高） (*一般情况下，都推荐用这个值，但是获得offsetWidth的时候与IE的值相差2px)</h5>
<h5> padding-box = 容器的实际 宽（高）+ padding </h5>
<h4> 示例： </h4>
<div class="box-size" id="div_boxSize">
<p>-moz-box-sizing CSS</p>
<pre>
.box-size
{
border: 20px #999 solid;
background: #fff;
display: block;
width: 300px;
height: 400px;
padding: 10px;
overflow: -moz-scrollbars-none;
}
</pre>
<select onchange="fnBoxSize(this.value)">
<option value=""> - 选择计算容器的方法 - </option>
<option value="content-box"> - content-box - </option>
<option value="border-box"> - border-box - </option>
<option value="padding-box"> - padding-box - </option>
</select>
</div>
<h4 class="copyright"> Power By blueDestiny, never-online, <a href="http://www.never-online.net" _fcksavedurl="http://www.never-online.net">http://www.never-online.net</a> </h4>
</BODY>
</HTML>

多层边框的CSS制作------mozilla的CSS参考之 -moz-outline：【上一篇】
远程数据本地游标统计时无小数问题的解决：【下一篇】

如何根据浏览器和分辨率调用不同的CSS代码

ASP.NET 'Atlas' Overview

UML2 Utilities for Model Driven Development

Open a Folder,and select a specified file(VC++).

C For Dummies(2nd Edition)- [0] Table of Contents

C For Dummies(2nd Edition)-Introduction

ILogView

Could not display Lst searchfield in right format

Secret CIA flights stopped in 2 countries (6.7)

【随机文章】

第 9 章中断处理