DIV+CSS在不同浏览器中的表现



在给员工培训DIV+CSS的过程中,他们向我提出了很多问题,有些问题我自己也没有想到过于是抽了些时间自己进行了一番实验,全部实验在IE7和Firefox中进行:

实验一、如果一个div没有指定border属性那么这个div在浏览器中会不会出现边框呢?

结果:IE7:不会。Firefox:不会。

实验二、如果一个div只指定了border属性的粗细值,那么这个div在浏览器中会不会现边框呢?

结果:IE7:不会。Firefox:不会。

实验三、如果一个div指定了border属性的粗细值,并且也指定了border属性的颜色值,那么这个div在浏览器中会不会出现边框呢?

结果:IE7:不会 Firefox:不会。

实验四、如果一个div只指定了border属性的粗细值,和样式那么这个div在浏览器中会不会出现边框呢?

结果:IE7:会,默认颜色为黑色Firefox:会,默认颜色为黑色。

实验五、如果一个div只指定了border属性的样式,那么这个div在浏览器中会不会出现边框呢?

结果:IE7:会,默认颜色为黑色 Firefox: 会,默认颜色为黑色。

实验六、如果一个div没有指定宽度和高度,那么这个div在浏览器中会是什么形状?

结果:IE7:宽度为100%,高度为0 ;Firefox:宽度为100%,高度为0。

实验七、如果一个div指定了宽度,没有指定高度,那么这个div在浏览器中会是什么形状?

结果:IE7:有一定的高度;Firefox:高度为0;

实验八、两个父子关系的div父:#father 子:#son 。CSS代码如下:

#father{

border:solid red 1px;

height:300px;

width:100px;

}

#son

{

border:1px black solid;

margin-right:100px;

width:100%;

}

那么在浏览器中father的实际宽度是多少呢?

结果:IE7:宽度为100px; Firefox:宽度为100px;

实验九、如果一个div未指定其在页面中的对齐方式,那么它在页面中的位置怎样?

结果:IE7:左对齐;Firefox:左对齐。

实验十、两个父子关系div,#father,#son 如果在father中指定text-align=center那么son在浏览器的位置怎样?

结果:IE7:相对father居中对齐;Firefox:相对father左对齐。

时间: 2024-10-13 17:40:45

DIV+CSS在不同浏览器中的表现的相关文章

css在各浏览器中的兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容

解决div布局中第一个div的margin-top在浏览器中显示无效果问题。

原味来源:http://www.hicss.net/do-not-tell-me-you-understand-margin/ 垂直外边距合并问题 别被上面这个名词给吓倒了,简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.你可以查看W3Shool CSS外边距合并了解这个基本知识. 实际工作中,垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距,而且只在标准浏览器下

font-weight: 100-900 在各个浏览器中的表现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>font_weight</title> <style> * {margin: 0;padding: 0;} p {font-size: 30px; text-align: center;line-height: 1.5} </style&g

2天驾驭DIV+CSS (实战篇)(转)

这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区[知识三] 什么是W3C标准?[基础一] CSS如何控制页面[基础二] CSS选择器[基础三] CSS选择器命名及常用命名[基础四] 盒子模型[基础五] 块状元素和内联元素 实战篇[第一课] 实战小热身[第二课] 浮动[第三课] 清除浮动[第四课] 导航条(上) | 导航条(下)[大练

浅谈div+css页面布局

解释:  DIV+CSS是Web设计标准,是一种网页布局方法.与传统的通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.“DIV+CSS”其实是错误的叫法,而标准的叫法应该是XHTML+CSS.因为DIV和table都是XHTML或HTML语言中的一个标记,而CSS只是一种表现形式. 方法: 在HTML文档中加入CSS.css是层叠样式表(Cascading Style Sheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术,也是

DIV+CSS 入门

前一阵玩csdn的时候,在网页上加上的qq和微博等,觉得很神奇.学完牛腩,也算开始了自己真正学习B/S之旅. 刚开始的时候,我不知道<div>是什么 也不清楚CSS用来干什么的,敲完了回过头来再看,好像明白了一些.BS正在进门中 ,写的不对各位多多指正. CSS 整体来说css中包括各种各样的样式属性,用于控制字体,颜色,对齐方式和边距,这些只是网页样式 的一些方面.css的样式属性分为两大类. 布局属性:由影响网页上元素位置的属性(如边距 填充 对其等等)组成 . 格式化属性,由影响网站中元

div+css的优势

什么是div+css:在介绍div+css优势之前先来介绍一下什么是div+css.div+css是当下网页设计中最流行的词汇之一,它是一种网页布局方式.在XHtml标准中,不再使用table定位方式,而是通过CSS控制div来实现我们所需要的定位,即div+css布局.此种布局方式已经超越表格布局方式,成为当下最为流行的方式,当前主流的大型网站甚至中小企业网站都已div+css布局方式,可见它的优越性所在.div+css的优势:div+css网页布局相对于table布局方式具有以下几个主要的优

IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.通过使用DIV盒子模型结构将各部分内容划分到不同的区块,然后用CSS来定义盒子模型的位置.大小.边框.内外边距.排列方式等.简单地说,DIV用于搭建网站结构(框架),CSS用于创建网站表现(样式/美化).该标准简化了HTML页面代码,获得了一

DIV+CSS实战系列课程附实例源码

教程目录: 1._固定大小圆角边框. 2._.不固定大小圆角边框. 3.灵活的图片边框. 4.div.css视频教程--.ul横向菜单. 5.div.css视频教程_文字排版. 6.div.css视频教程_制作简单页面之ps布局. 7.div.css视频教程_.制作简单页面之css布局. 8.div.css视频教程_.制作简单页面之填充内容. 9.div.css视频教程_.如何改变布局成三列布局. 10.div.css.视频教程._页面组合式_菜单的调用. 11.DIV.CSS实战视频教程_.圆