一起CSS

当前位置:一起CSS

IE和FF下的margin-top

日期:2008-08-13 分类:CSS

由于垂直 margin 会出现叠加的现象,(如果你还不太了解垂直 margin 叠加的原理,请查看margin叠加原理)所以有些情况下 margin-top 在 IE 和 FF 会出现不同的现象。如下面的代码:

<div id="box">
	<div id="son"></div>
</div>
* { margin:0; padding:0;}
#box { width:500px; height:400px; margin:0 auto; background:#ccc;}
#son { width:500px; height:300px; margin-top:20px; background:#f00;}

查看Demo

在 IE 里,出现我们希望的效果,而在 FF 里,却没有。子盒子 #son 没有出现 margin-top:20px 的效果,反而父盒子 #box 出现了 margin-top:20px 的效果,也就是我们给子盒子设的 margin-top:20px 属性出现在父盒子里了。

怎么解决呢?最好的办法是用父盒子的 padding-top 代替子盒子的 margin-top,详细代码如下:

* { margin:0; padding:0;}
#box { width:500px; height:400px; margin:0 auto; padding-top:20px; background:#ccc;}
#son { width:500px; height:300px; background:#f00;}

查看Demo

还有其他方法,但和上面的比较更麻烦,就不介绍了。。。

=======华丽的分割线=========================================

读者“vampire”在评论中说为父元素设置 overflow 属性也可以解决此问题。经测试,为父元素设置 overflow 属性,值为 hidden 或 auto 都能解决此问题,而且这种方法似乎更容易理解,更符合本意。感谢“vampire”的评论。

查看:984 评论:7 标签:

有序列表项在IE里全部显示“1”的奇怪现象

日期:2008-08-12 分类:CSS

前段时间有个网友发个文件给我,问我什么他的有序列表项在IE里全部都显示“1”,当时我也觉得很奇怪,因为之前我也没有遇到过这种情况。现在我们来看看为什么会出现这样的奇怪现象。 阅读全文 >

查看:423 评论:没有评论

三种有效的清除浮动的方法

日期:2008-08-12 分类:CSS

浮动是CSS布局中最常用的属性,然而浮动是脱离标准流(也称文档流)的,如果不清除浮动的话,会对周围的元素产生影响。也正是浮动脱离标准流这一特性,使浮动成为CSS布局的难点之一。

清除浮动有好一些方法,但兼容各种浏览器的方法却不多。下面我就介绍三个比较有效的兼容的方法,这三个方法也见证了我用CSS布局的几个阶段吧。这三个方法中的某种方法可能你也在用,如果你对那种方法很熟悉了可以直接54。

我们以下面的XHTML代码为例来说明这三种方法的用法: 阅读全文 >

查看:842 评论:4 标签:

遵循Web标准的网页设计工作流程(一)

日期:2008-07-30 分类:未分类

经常有读者来信询问在实际开发一个网站的时候,具体是按照什么工作流程进行工作的,一个网站到底是如何从零开始一点点做出来的呢?

今天我们来就这个问题作一些说明。我们今天介绍的是关于从零开始设计一个页面的过程,我们可以把一个页面的完整设计过程分为7个步骤,如下图所示。

网页设计流程

在图中,这个过程分为了7个步骤,并且说明了这7个步骤相应使用的工具。这7个步骤依次为: 阅读全文 >

查看:607 评论:没有评论 标签:

图片对网站速度的测试

日期:2008-07-25 分类:未分类

一次偶然,用Firebug看到腾讯将许多小图标、小图片合在一张大图上(点击这里查看),当时觉得很奇怪,因为按照传统,我们会将那些小图标、小图片切分成一个一个小的图片。想来想去,我觉得可能更网站速度有关。后来又陆续见到这样的例子,我就越来越肯定这个观点了。

但到底是不是上面所说的那样呢?我一直没时间证实,今天我们就来测试一下这样做对网站速度到底有怎样的影响。我们拿一张图片(见下图),测试网页加载这一整张图片快还是把它切分成14(14个栏目)个小图片快。 阅读全文 >

查看:984 评论:4

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved