2006-01-07[原]修正IE6的3像素BUG
TAG：CSS 原创 代码分享在IE6中使用浮动之后，在浮动对象的后面会出现3像素的间隔，在网上找到两种方法，不过原理还没弄懂，下面是例子：
一，CSSPLaY上的例子，主要是文字的：
------------------------CSS代码----------------------------
.holder {
border: 1px solid #000000;
display: block;
height: 150px;
margin: 2em auto 0 auto;
width: 300px;
}
.float {
background: #E09222;
color: #FFFFFF;
float: left;
height: 60px;
text-align: center;
width: 100px;
}
.error {
display: block;
margin-left: 100px;
padding-left: 5px;
text-align: left;
}
.correct {
display: block;
margin-left: 100px;
padding-left: 5px;
text-align: left;
}
* html .correct {
display: inline-block; /*将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内*/
padding-left: 2px;
}
---------------------------------------------------------------
------------------------HTML代码----------------------------
<div class="holder">
<div class="float">ERROR</div>
<div class="error">|||||||||||||||||||||||<br />|||||||||||||||||||||||<br />|||||||||||||||||||||||<br />|||||||||||||||||||||||
<br />|||||||||||||||||||||||<br />|||||||||||||||||||||||
</div>
</div>
<p class="bold">IE6的3像素BUG</p>
<div class="holder">
<div class="float">FIXED</div>
<div class="correct">|||||||||||||||||||||||<br />|||||||||||||||||||||||<br />|||||||||||||||||||||||<br />|||||||||||||||||||||||
<br />|||||||||||||||||||||||<br />|||||||||||||||||||||||
</div>
</div>
<p class="bold">修正后效果</p>
---------------------------------------------------------------
二，另一个例子是E库技术学院上的，有提到了层的解决方案：
------------------------CSS代码----------------------------
*{
padding: 0;
margin: 0;
}
#layout{
background: #F1F1F1;
width: 400px;
float: left;
}
#floatbox {
float: left;
width: 100px;
height: 50px;
background: #6d6;
}
p {
margin: 0 0 0 100px;
background: #dd9;
}
* html #floatbox {
margin-right: -3px;
}
* html p {
height: 1%;
margin-left: 0;
}
---------------------------------------------------------------
------------------------HTML代码----------------------------
<div id="layout"><div id="floatbox">floatbox</div><p>现在没有3px了</p><p>现在没有3px了</p></div>
2006-01-05[原]用target实现动态效果
TAG：CSS 代码分享 原创今天在CSSPLaY淘到了一个不错的效果，可惜IE不支持。越来越觉得IE不爽了！！
-------------------------------css代码---------------------------------
<style type="text/css">
<!--
#change:target {
color: #C00;/*字体颜色：红色*/
}
#wrapper:target {
background: #F0C992;/*背景颜色：土黄*/
}
#inf:target {/*在标题下面添加横线*/
border-bottom: 5px solid #697210;
color: #697210;
padding-bottom: 5px;
}
#inf:target :before {/*在标题前面添加"MY "字符*/
color: #697210;
content: "MY ";
font-size: 1em;
}
#inf:target :after {/*在标题前面添加" PAGE"字符*/
color: #697210;
content: " PAGE";
font-size: 1em;
}
#head:target {/*图片名：back3.gif*/
background: url(back3.gif) #FFFFFF no-repeat 345px 5px;
}
#info li {
line-height: 1.7em;
}
-->
</style>
------------------------------------------------------------------------
-----------------------------html代码---------------------------------
<div id="change">
<div id="wrapper">
<div id="head">
<h2 id="inf">TARGET PRACTISE</h2>
<ol>
<li><a href="#change">改变文字颜色为红色</a></li>
<li><a href="#wrapper">改变背景颜色为土黄</a></li>
<li><a href="#inf">改变标题文字</a></li>
<li><a href="#head">改变标题图片</a></li>
</ol>
</div>
</div>
</div>
------------------------------------------------------------------------
只需要在链接上用锚点就可以实现类似JScript的效果。
这个功能不能在IE和Opera中实现。
2005-12-31[原]如何使 CSS 正常工作
TAG：CSS 文章分享 原创leftjustfied.net 给出了一篇介绍如何使 CSS 正常工作，节省你调试时间的文章：CSS Negotiation and a Sanity Saving Shortcut，其中的一些方法值得推荐。加上《CSS的十八般技巧》中提到的一些方法，我做了一下整理：
首先，考虑到大量问题源自不同浏览器下默认的 margin 和 padding 的设置不同，作者建议干脆先把所有的 margin/padding 清零：
----------------------------------* {
padding:0;
margin:0;
}
----------------------------------
导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：
----------------------------------
@import url("main.css");
----------------------------------
然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：
----------------------------------
@import "main.css";
----------------------------------
这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。
1.注释的方法
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
----------------------------------
html>body p {
/* 定义内容 */
}
----------------------------------
(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
----------------------------------
* html p {
/* declarations */
}
----------------------------------
(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧：
----------------------------------
/* \*/
* html p {
declarations
}
/* */
----------------------------------
2.条件注释(conditional comments)的方法
另外一种方法，我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：
----------------------------------
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
----------------------------------
或者在 CSS 中使用 Tantek 发明的 band pass filter:
--------------------------------------------------------/* IE5 */
@media tty {
i{content:"";/*" "*/}};
@import 'ie5.css'; {;}/*";}
}/* */
/* IE 5.5 */
@media tty {
i{content:"";/*" "*/}}@m;
@import 'ie55.css'; /*";}
}/* */
2005-12-16[原]JScript中innerHTML的例子
TAG：JScript 文章分享 原创使用JScript的innerHTML属性，可以获取或设置位于指定的 HTML 服务器控件的开始标记和结束标记之间的内容。这个属性现在在页面设计中很流行，因为它可以让静态的页面也能实现动态的效果。
如你可以让静态的页面也实现像ASP页面中的将顶部和底部分别存成一个文件再用include包含到页面中，实现模版的功能。下面看看如何实现：
先做好顶部和底部，如下：
-----------------------------顶部 top.html-------------------------------
<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0" bgcolor="blue">
<tr>
<td>这是顶部</td>
</tr>
</table>
-----------------------------------------------------------------
-----------------------------底部 bottom.html-------------------------------
<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="red">
<tr>
<td>这是底部</td>
</tr>
</table>
-----------------------------------------------------------------
然后将这两部分的代码分别用下面的格式存成JS文件：
-----------------------------顶部 top.js-------------------------------
var str;
str='<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="blue">';
str=str+'<tr>';
str=str+'<td>这是顶部</td>';
str=str+'</tr>';
str=str+'</table>';
top.innerHTML=str;
-----------------------------------------------------------------
-----------------------------底部 bottom.js-------------------------------
var str;
str='<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="red">';
str=str+'<tr>';
str=str+'<td>这是底部</td>';
str=str+'</tr>';
str=str+'</table>';
bottom.innerHTML=str;
-----------------------------------------------------------------
下面我们看看要调用这两个部分的文件：
---------------------------------try.html--------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JScript中innerHTML的例子</title>
</head>
<body>
<!-- 顶部开始 -->
<div id="top"></div>
<!-- 顶部结束 -->
<!-- 主要内容开始 -->
页面主要内容
<!-- 主要内容结束 -->
<!-- 底部开始 -->
<div id="bottom"></div>
<!-- 底部结束 -->
<script language="javascript" src="top.js"></script>
<script language="javascript" src="bottom.js"></script>
</body>
</html>
-----------------------------------------------------------------
这样当你打开try.html的时候，就可看到顶部和底部都已经自动加进来了。
需要注意的是，在JS文件中的innerHTML前面的id名与要调用的页面中的id名要一至。例子中的top和bottom。
2005-11-28[原]关于使用CSS居中(包括水平/垂直)
TAG：CSS 代码分享 原创今天有网友问到用CSS的text-align: center属性在FF中不起作用的问题，找了一下网上的资料，整理了一下：
水平居中的问题可以用以下方法解决：
先看一下body的CSS样式：
---------------------------------------------
body{ margin:0;padding:0;text-align:center;}
---------------------------------------------
这里的body把margin与padding设置为0，这样就把body内容与浏览器边缘亲密接触。然后text-align:center 把body的内容全部居中。
在需要水平居中的DIV层添加以下属性：
-------------------------------------------
margin-left: auto;
margin-right: auto;
-------------------------------------------
也可写成：
-------------------------------------------
margin:0 auto;
-------------------------------------------
这样在FF中就可以居中了，在IE中别忘了在开头加上DTD哦，不然可是不起作用的：
-------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
------------------------------------------------------------
如何使图片在DIV 中垂直居中
用背景的方法。举例：
----------------------------------------------------------
body{BACKGROUND: #FFF url(http://www.blogbus.com/images/site/blogbus_logo.gif) no-repeat center;}
----------------------------------------------------------
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"
如何使文本在DIV中垂直居中
果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：
------------------------------------------------------
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body>
<div id="center"><p>test content</p></div>
</body>
</html>
--------------------------------------------------------
说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。
不过这个方法还不是最好的方法，目前也只能先用用咯。
