专注于前端开发、平面广告、网页设计
<table style=”cursor: pointer;” onclick=”window.open(‘http://www.52sonen.com/’, ‘_blank’)” width=”100%”>
<tbody>
<tr>
<td height=”100″ bgcolor=”#000000″></td>
</tr>
</tbody>
</table>
将一个元素设置为”position:relative”可以解决很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。
具有margin属性的浮动元素可能引起的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题，当然，方法也不是只有这一个。
很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 用来确定相对于其他元素，内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果。
最简单的设置hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。我们推荐设置实 际尺寸，但是问题是这是不现实的，你可能需要使用”height:1%”。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候 hasLayout已经被启用。
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：
1 |
<!--[if !IE]>Put your commentary in here...<![endif]--> |
不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义：
1 2 3 4 5 |
#element { min-height: 20em; height: auto !important; /* 所有浏览器都理解这段代码 */ height: 20em; /* IE6 错误的使用这个值 /* } |
对于前端开发人员来说，页脚的处理时常让我们比较头痛。因为，如果页面比较长还好说，如果页面比较短，则页脚则会跑到页面的中间部位，十分的不雅观。
那么有什么办法能让页脚乖乖的出现在每页的最下方呢？方法当然是有的，一种是使用js+css的方法,这种办法比较好理解，实现也比较的简单，这也是大家用的比较多的办法。但是，如果用户禁用了js，那么这种方法自然也就不再能够实现。那我们自然的想到了使用纯css。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title>我个是非常好的小页脚</title>
<meta http-equiv=”Content-Type” content=”text/html” charset=”utf-8″ />
<style type=”text/css”>
html{height:100%;overflow:auto;}
body{margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}
.main{border-bottom:60px solid #fff;}
#footer{position:absolute;width:100%;clear:both;height:25px;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin-top:20px;bottom:0;left:0;}
</style>
</head>
浏览器兼容手册
1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto
2. 高度问题
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;
但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3. clear:both;
不想受到float浮动的，就在div中写入clear:both;
4. IE浮动 margin 产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
全文阅读 »
我们知道，在页面高度不够时候，FF火狐浏览器是默认没有滚动条的。但是当页面在加载完了之后，如果页面够长，会出现稍微的闪动（偏移）。这里我们强制FF在开始的时候就有滚动条，这样，就不会出现那样的现象了。
其实，实现过程也不是很复杂，具体看例子：
< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>强制Firefox显示滚动</title>
<style type=”text/css”>
<!–
html {overflow:-moz-scrollbars-vertical;} /*方法一*/
html {min-height:101%;} /*方法二*/
–>
</style>
</head>
<body>
<p>强制Firefox显示滚动条：</p>
<p>方法一：html {overflow:-moz-scrollbars-vertical;}</p>
<p>方法二：html {min-height:101%;}</p>
<p>为什么要强制显示滚动条？因为在Firefox你会发现页面在没有加载完全的时候是没有滚动条的，当加载完成后滚动条才显示出来，所以会感觉页面偏移了下。</p>
</body>
</html>
这首歌确实看了让人回味无穷!
前段时间在68上看到一个效果，觉得很不错。今天稍微有点空，所以自己也试着做了一下。重点在3D效果及光感的制作，不过制作的时候还是要注意好高光及暗调的搭配，能更好的体现按钮的质感。
最终效果
1、开始前老样子先在PS里新建一个文件，设置宽高800*600。
2、使用圆角矩形工具圆角为10px，这里颜色为红色。
3、将前面的圆角矩形图层复制一次，在复制出的图层上按鼠标右键，选择栅格化图层，这样将形状图形转化为像素图形。同样将另一个图层进行栅格化处理。
4、这里我们为了制作出3D按钮的立体质感效果，将会用底部的图层来做阴影，上面的图层保持不变，所以选中底部图层，按ctrl+u设置”色相/饱和度”参数如下。
一、使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。
二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如:
全文阅读 »
在前端开发中，经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等不一致。
在父层使用position:relative;和padding（当然0值除外）后，ie6中层的定位起始坐标是从padding后的位置算起，而其他则从层的真实位置算起，而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。
这里就不截图了，具体可以看本文底部链接是前段大牛，码头的博客地址！
目前解决办法，使用csshack,_left针对ie6进行重设。
由 愚人码头 撰写 http://www.css88.com/archives/1584
