网络编程
位置:首页>> 网络编程>> 网页设计>> border边框在浏览器中的渲染方式

border边框在浏览器中的渲染方式

作者:小志 来源:blog.linxz.cn 发布时间:2010-03-10 10:52:00 

标签:边框,浏览器,渲染,border

针对border边框属性在浏览器中的渲染方式很早以前就开始在QQ群中看到大家在讨论,而我也一直以border:0 none;的方式处理。其中当然也是有我自己为什么要做的原因,对于这个原因在下面的分析中将会提到。在对border边框属性进行分析之前,需要说明的几点内容是:

  1. 小志我并不是一个分析专家,只是借助Firebug和IE developer这两个工具在FF浏览器和IE浏览器中查看浏览器的渲染结果;

  2. 因为只是查看了FF浏览器和IE浏览器的渲染结果,并不能代表所有的浏览器都是相同的方式进行渲染。

为了能更好的对边框的样式进行对比,这里我们选用的是“按钮”元素,但使用的标签却是不同的,它们分别是input标签元素和button标签元素。顺带需要提到的一点就是,这两个标签元素在各个浏览器中的共同点是都属于系统控件元素,边框样式以及按钮背景都是跟系统主题有着绝对性的关系。

使用相同的XHTML结构代码,分别针对FF浏览器和IE浏览器进行对比。

<input type="button" value="按钮" />
<hr />
<button>按钮</button>

演示动画1   演示动画2

通过默认的当前系统主题的样式影响,我们发现IE浏览器在对button和input这两个标签元素的解析上已经是存在着一点细节上的不同,但就目前这个系统主题中所看到的页面表现效果是近乎于相同的,关于这点有兴趣的同学可以自行实验一下。上列所看到的无任何CSS样式定义之前的属性结果中,我们得到的结果是:

    * FF浏览器:input标签和button标签的边框样式为border-width:3px; border-style:outset; border-color:#E5E5E5;
    * IE浏览器:input标签边框样式为border-width:2px; border-style:outset;而button标签边框样式为border-width:2px;

有了这些数据之后,我们再看看当我们针对border边框属性定义了样式之后会是怎么样的一个结果。

分析border边框属性在浏览器中的渲染方式 首发小志博客,如果感觉内容还不错而要转载的朋友请不要怜惜 http://blog.linxz.cn/ 这么一个URL,谢谢!

0
投稿

猜你喜欢

  • 在ASP中,直接使用“Insert into” 语句与使用ADO中AddNew方法有什么区别?哪一种更好呢?AddNew方法的实质就是封装了
  • 这个url的正则表达式判断的js!是比较全面的。它验证的情况包括!IP,域名(domain),ftp,二级域名,域名中的文件,域名加上端口!
  • 自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注,然而唯一能让IE识别那些新元素(如<article>)的途径
  • 相信有很多人有用程序向Excel导数据的需求, 且做过. 一般导出一些文本数据是很方便的, 可选方法很多, 比如拼接文本字符串存.cvs格式
  •  学习目的:掌握下拉列表框的用法,并理解AutoPostBack属性; 理解IsPoskBack及用法; 初识DataTable的
  •     Macromedia Dreamweaver MX 2004提供了更多功能强劲的可视化设计工具、应用开
  • 1.delete不能使自动编号返回为起始值。但是truncate能使自动增长的列的值返回为默认的种子 2.truncate只能一次清空,不能
  • phpMyAdmin 是一套可以通过WEB来管理 MySQL-server 以及单一数据库的 PHP
  • 只添加了一些自己想到的常用的功能,欢迎大家补充添加自己的好的思路.    通用的正则和方法可以写在RegExpObj中,
  • 我和朋友都建了一个电子商务网站,大量的访问,频繁地建立和中断数据库连接,导致Web 数据库应用程序降低了数据库服务器的性能。但最近,朋友使用
  • em 和 strong 的区别,可以从三个层次上来谈。首先看 HTML 4.01 中的说明:EM: Indicates emphasis.S
  • 听说安全地断开Connection连接的记录集可以提高ASP的运行速度,请问如何实现?很多人会将一个Connection对象存储在Appli
  • 在查看MySQL对文件的操作中,它在不同的操作系统上对文件的操作,除了使用标准C运行库函数,包括open、close、seek等,在Win3
  • 木马原理:入侵者使用诸如ASP图片木马生成器之类的工具将一张正常的图片与一个ASP木马文件合并成一个图片文件(即将对网站有害的ASP代码插在
  • 在动态删除iframe时,同时把iframe里嵌套的iframe 删除,遇到了这个问题。本来之前都没报错,突然昨天他们嵌套了一个 跨域 的网
  • 随机背景--当你每次进入该页面时,从已指定的图片文件夹中,随机选取一个图片作为背景显示。这里介绍的方法是用ASP+CSS来实现的。 &nbs
  • 这篇文章介绍了 5 个实用的 CSS 属性。你应该很熟悉,但很可能很少会使用到。我并不是在谈论展望全新的 CSS3 属性,我指的是旧的 CS
  • 问:握怎样测试 MySQL安装?答:可以通过以下命令测试MySQL服务器是否工作:C:\> C:\Program Files\MySQ
  • CSS入门很简单,规则不多,写法也比较灵活,因此也带来了很多有创意的写法。跟IE一样,很好的容错性,像《 边框样式写法总结 》所说的bord
  • 在计算机中数据有两种特征:类型和长度。所谓数据类型就是以数据的表现方式和存储方式来划分的数据的种类。在SQL Server 中每个变量、参数
手机版 网络编程 asp之家 www.aspxhome.com