易截截图软件、单文件、免安装、纯绿色、仅160KB

头痛的css(div)布局

我所用的主题fstos在制作和测试阶段都用的ie6,因为是参照wordpress自带的几个主题写的,当时没有考虑css的兼容性问题,犯了“大跃进”错误(用firefox浏览简直是惨不忍睹),但由于工作很忙也没有时间修理它。这两天抽了些时间好好对他来了个大清理,出顺便将我遇到的主要问题总结一下,希望对大家有所帮助。
  问题现象:ie中显示正常,firefox中却支离破碎。可大致总结为:有的本来居中的没有居中;本来在最下面的跑到上面来了;本来在一侧的结果到了别处;有的在100px处,可看起来像在105px(举例而已)处;同在一个父层中的两个子层,一个内容多些从高度上来说自然拉伸,但另一个子层却不跟着拉伸;一串英文过长超出了原设定的边界。接下来一个一个说:
  1、本来居中的没有居中
  在ie中显示是居中的(只需要设置body的text-align:center;不知道为什么感觉这样设置很奇怪。),在firefox中显示是靠左的即没有居中,重新检查了下发现需要设置margin来使相应对象居中:margin:0 auto; 设置的值的含义我就不说了。
  2、本来在最下面的跑到上面来了
  我采用的是footer单独一个行的布局,也就是说,在footer的左右是没有其他层的。在ie中显示为最下面(css同样也没有特别设置),在firefox中显示跑的上面来了,这个问题是因为没有设置clear,需要设置为clear:both; 即不允许该层两边有浮动对象。
  3、本来在一侧的结果到了别处
  在ie中sidebar显示在正常的页面中部的右侧(我的布局分为上中下三部分,上下分别为header和footer,中部为帖子列表和sidebar,sidebar在中部的右侧),在firefox中sidebar跑到了中部的下面,footer的上面。
  起初我认为可能是sidebar设置为float:right;的缘故排除后,我将sidebar的float设置去掉,转而通过设置margin来使sidebar显示在中部的右侧,但它还是顽固的待在下面,最后通过反复的检查发现之前我在sidebar的一个ul样式中有一个clear:both;的设置,将它去掉后sidebar在firefox中回到上面了,但在ie中还是在下面(检查发现是因为刚才调试的时候将margin的值设置的太大了,firefox显示为继续的右移,而在ie中就转到下一排了,修改margin值后没有这个问题了)。
  但是这样却发现ie中和firefox中有几个象素的差别,在ie设置为合适的位置,可在firefox中就靠左了些。这个问题我没有分析清楚,暂时认为是浏览器间的处理不同吧。最后我还原sidebar的float设置为right,这时两


相关文档:

常用CSS命名规范

模块:module.css
基本共用:base.css
布局、版面:layout.css
主题:themes.css
专栏:columns.css
文字:font.css
表单:forms.css
补丁:mend.css
打印:print.css
头:header  
内容:content/container  
尾:footer  
导航:nav  
侧栏:sidebar
栏目:column  
页面外围控制整体布局宽度: ......

JavaScript CSS Style属性对照表

JavaScript代码
<mce:script type="text/javascript"><!--
function imageOver(e) {
e.style.border="1px solid red";
}
function imageOut(e) {
e.style.borderWidth=0;
}
// --></mce:script>
<img src="phplamp.gif" onmouseover="imageOver(this)" onmo ......

5个CSS书写技巧

1. CSS Reset/重置
你也许需要先了解什么是css重置。然后怎么样写css重置呢。
你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该根据你的项目改成你自己的reset.
不要使用* { margin: 0; padding: 0; } 。我个人很爱用,原作者提到使用这句并不适用一些元素比如单选按钮。不过俺博客里面也没有单 ......

CSS修饰的表格

下面这个CSS样式的表格,个人感觉颜色起到了很大的作用。如果不是两种颜色的对比效果好,可能也就是一般的表格:
先来看HTML:
<table width="590" cellspacing="1">
 <caption>
  text
 </caption>
 <thead>
<tr>
<th class="line1" scope="col">text< ......

CSS sprites技术加快您的网站(减少网站HTTP请求)

       减少网站HTTP请求这是加快网站访问速度的关键,而CSS sprites技术是把多张图像组合成一张图像,这样用户在访问网站时一次性把多张图片加载完,而不需要一张张图片的加载,这样减少了组件的页码,建立更丰富的内容的网站,同时也取得了快速的反应
时间。
    &n ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号