css 宽高度在各浏览器中的差异比较

<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>

时间: 2024-10-27 06:33:22

css 宽高度在各浏览器中的差异比较的相关文章

元素的内联事件处理函数的特殊作用域在各浏览器中存在差异_javascript技巧

标准参考 无. 问题描述 在一个元素的属性中绑定事件,实际上就创建了一个内联事件处理函数(如<h1 onclick="alert(this);"...>...</h1>),内联事件处理函数有其特殊的作用域链,并且各浏览器的实现细节也有差异. 造成的影响 如果在元素的内联事件处理函数中使用的变量或调用的方法不当,将导致脚本运行出错. 受影响的浏览器 所有浏览器 问题分析 1. 内联事件处理函数的作用域链 与其他函数不同,内联事件处理函数的作用域链从头部开始依次是:

Div+CSS布局的宽度计算及在各浏览器中的差异比较

对比于传统的表格布局和框架布局,DIV+CSS布局有着布局容易.改版方便.样式定义灵活.HTML代码简洁清晰.易于JavaScript操控等优点.在众口皆碑的同时,对于一些初学者,总会遇到各种各样的问题,比如说DIV的宽度或高度的计算问题. 我们来探讨一下影响DIV宽度或高度的属性有哪些? DIV的宽度 = width + padding + border + margin 仅从一条公式上看,可能有点难理解,我们通过测试代码和截图来观察一下.为了测试结果观察直观,我们只测试一边,即左边,即本来p

事件模型在各浏览器中存在差异_javascript技巧

标准参考 根据 W3C DOM 2 Events 描述,EventTarget 接口被所有支持 DOM 事件模型的节点(Node)实现. 该接口提供了 'addEventListener' 和 'removeEventListener' 方法,用来绑定或解绑一个 EventListeners 接口到一个 EventTarget. DOM 2 Events 中定义了 Event 接口,用来提供事件的上下文信息,它提供了若干标准属性和方法. 实现 Event 接口的对象一般作为第一个参数传入事件处理

如何解决css样式表在不同浏览器中显示效果不同的问题

一种简单的办法就是采用:使用IE专用的条件注释 <!--其他浏览器 --> <link rel="stylesheet" type="text/css" href="css.css" /> <!--[if IE 7]> <!-- 适合于IE7 --> <link rel="stylesheet" type="text/css" href="ie

动态创建样式表在各浏览器中的差异测试代码_javascript技巧

复制代码 代码如下: <!doctype html> <head></head> <body> <span id="con">xxx</span> <script> var css = document.createElement('style'); css.setAttribute('type', 'text/css'); var cssText = 'span{color:Red;}'; if(cs

IE、FF、Chrome浏览器中的JS差异介绍_基础知识

因为浏览器公司各自为利益考虑,到目前为止各浏览器的HTML标准或是JS标准都还未统一.在平常的开发中,我们常使用的JS框架基本已经帮我们处理好了JS在各浏览器中的差异,但作为一个开发人员,还是有需要了解JS在浏览器中的差异. FF.Chrome:没有window.event对象 FF.Chrome:没有window.event对象,只有event对象,IE里只支持window.event,而其他主流浏览器两者都支持,所以一般写成:function handle(e){e = e || event

setTimeout与setInterval在不同浏览器下的差异

setTimeout与setInterval是window对象的两个非常神奇方法,用于实现定时 或延时调用一个函数或一段代码. (新手可能认为setTimeout与setInterval是javascript函数,这是错误的. 新手容易将javascript对象函数与DOM对象方法混淆.) 先来一段代码,大家猜猜在各种浏览器下的结果会是怎么样的呢? function f(){ var s = 'arguments.length:'+arguments.length+'; '; for(var i

setTimeout与setInterval在不同浏览器下的差异_javascript技巧

.(新手可能认为setTimeout与setInterval是javascript函数,这是错误的.新手容易将javascript对象函数与DOM对象方法混淆.) 先来一段代码,大家猜猜在各种浏览器下的结果会是怎么样的呢? 复制代码 代码如下: function f(){ var s = 'arguments.length:'+arguments.length+'; '; for(var i=0,n=arguments.length;i< n;i++){ s += ' ['+i+']:'+arg

CSS网页制作技巧:IE浏览器下li的默认高度问题

文章简介:CSS网页制作技巧:IE浏览器下li的默认高度问题. 昨天,在家打开IE7浏览器看"视频导航网"的时候,发现居然有排版错误. 用F12开发者工具看了下,发现 li 的默认高度既然不统一? 用工具看了下,发现火狐高度解析统一为33px,而IE7解析高度根据字的不一样,默认解析的高度为30px,纯数字的解析高度为31px;中英文组合的解析高度为32px; 解决方法一:给LI设置高度后,IE7正常了,但IE6问题依然存在.原来,LI里面还嵌套着A标签,给A也设置一个高度后问题解决.