在ie6下，当页面的编码(utf-8)与调用css和js的编码(gbk)不同时，并且css和js代码中含有中文。
会出现js执行出错，或者css显示混乱的情况。
解决方案-1：
给调用的js或css加编码
<script src="xx.js" language="javascript" charset="gbk"></script> <link href="xxx.css" rel="stylesheet" type="text/css" charset="gbk" />
解决方案-2：
css可以在代码中声明编码@utf-8、@gb2312
javascript可以将中文转化成Unicode来解决。这样的话可维护性差些。
但是可以通过开发版本和发布版本来解决这个问题。
开发版本包含中文注释，及中文字符。
发布时通过脚本自动删除注释，并将中文转成Unicode。
在工作中是否遇到这种情况。。
1.写好的一个html片段。暂时不需要了。。过一会又有人跑过来跟你说，刚才的那段还要。。。又过了一会他又说还是不要算了。。。。。囧。。。
2.页面错乱。。怎么查都查不出原因。。没办法只能用最土的方式。。删html逐一排查。。。
对于这类情况，我们多数是用注释去解决。。。但html复杂的注释语句真的是让人无法忍受。。。试想在第一种情况中。反复的敲打“<!– –>”是多么的让人浮躁啊。。
来搞个注释开关吧，来快速打开和关闭注释。。。。。
在需要设置注释的上下各写两个空注释。基本格式如下图
当我们要打开注释开关，注释掉文本的时候，只需要将文本上面的空注释的结束>删除即可。见下图。
想反的当需要关闭注释的时候，只需要再把>补上即可关闭。。。
是不是很有意思。。 。。不过我更是习惯通过删除“-”来控制开关。 因为打>的时候还需要按住shift。。。太累。。。
在让我们看看其他的注释开关。
CSS与html同理，如下：
关闭状态
打开状态
css和html一样，因为只有一种注释方式，所以他们如果在代码中嵌套注释的话。。就很困难了。。
接下来看看javascript的。。因为和php一样有// 和 /* */两种方式，所以他们组合起来的形成开关。功能就很强大了。。可以支持注释嵌套。。如下。
关闭状态：
打开状态
你发现其中的奥妙了么？
注1：搞过php或perl的人应该了解这种技巧，这些技巧也是从中得到的灵感而演化过来。。当然还有jsp,perl等等。。这里就不多说了。。。有兴趣的同学可以接着搞一下。
我们经常使用到a,button,input等标签，通过css加背景等方式来实现按钮的效果。但是要做一个通用的样式类，又能保证在各个浏览器下表现一致，还能有很好的扩展性的按纽可不就那么容易了。好了废话少说。进入正题。
首先我们选择a和button两个标签作为通用按纽的外包装器。主要考虑到，在ie6不支持a以外的:hover伪类，使用a就可以对按钮做悬浮状态，这就是为什么选择他们做为最外层的包装器而不是span或者其他的标签。为什么不用input下面会详细说到。
先来认识一下button的类型(type)，button，默认的类型。submit，该可以用来提交表单，功能同<input type=”submit” value=”提交” />。reset，可以用来恢复表单默认值。如下
<form action=""> <input type="text" value="I LOVE CHINA" /> <button type="button">type="button"，我是一个默认的button,</button> <button type="submit">type="submit"，我可以用来提交表单</button> <button type="reset">type="reset"，我可以来清空表单</button> </form>
之前说了，当button的type属性为submit的时候，同样可以对表单进行提交，那为什么要选择button,而不是input。原因有两点。
但如果想让button在各个浏览器和各种操作系统下表现一致。还是一件比较让人头疼的事情。
在对button清除padding和border之后，ie6，7都会在上内边距产生1个像素的空间，firefox2，3（beta5）则会产生左右内边距3个像素和上内边距1个像素的空白，opear和safair则不会产生多余的内边距填充。这些差异给我们美化button上填了很多麻烦。
下面通过一个例子来演示一下通用button的制作
Html
<button class="btn btn-style-1" type="submit"><b><b>有兴趣有兴趣</b></b></button>
在这里采用了三层标签的结构，让最内层<b>的背景repeat-x，得到自适应文字宽度。当然也可以两层标签结构的使用滑动门技术实现。但如果要通用的话，那滑动门的背景至少要有800px的宽（考虑到宽屏，文字长等情况）
Images
左边圆角
中间重复背景
右边圆角
在制作的过程中，也许会问，为什么不将三张合成一张背景，其实原因就是上面提到的。每个浏览器下对button标签的默认内间距解释的都不一样。所以只能通过背景垂直居中的方式来解决三张图片对齐的问题。
CSS
.btn{
display:inline-block;
display:-moz-inline-stack;
*display:inline;
zoom:1;
margin:0;
border:0;
padding:0 5px 0 0;
text-align:center;
font-family:"微软雅黑",YaHei,"黑体";
vertical-align:middle;
font-size:0.8em;
color:#000;
text-decoration:none;
background:url("../img/yn_btn_pink_right.gif") right no-repeat;
}
button.btn{
cursor:pointer;
width:auto;
*overflow:visible;
border:0 none;
background-color:none;
vertical-align:middle;
}
.btn b{
display:inline-block;
display:-moz-inline-stack;
*display:inline;
zoom:1;
padding:0 0 0 5px;
position:relative;
white-space:nowrap;
font-weight:normal;
height:22px;
line-height:22px;
background:#FFD8D3 url("../img/yn_btn_pink_left.gif") left no-repeat;
_background-color:#FFF;
}
button.btn b b{
_margin-top:1px;
padding:0px 8px;
height:22px;
line-height:22px;
cursor:pointer;
background:#FFD8D3 url("../img/yn_btn_pink_center.gif") left repeat-x;
_background-color:#FFF;
}
在css中你会发现其中用到了position:relative;是为了解决ie和firefox下点击后下沉错位的问题。但在opear下还是会没解决掉。还请大家多多帮忙。
在这个例子中还可以在button中嵌入icon的来增加它的视觉效果，篇幅有限就不在这里举例子了。
相关阅读：
http://www.designdetector.com/demos/buttons-padding-demo.html
在IE6下使用浮动可能会出现文字重复的情况.
引发这种BUG有几个条件
1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
2,3可以通过外面再包一次DIV解决
老外写的.如何写出漂亮的HTML代码.总结的不错.拿出来分享一下.
1.DOCTYPE Properly Declared
别忘记头部的声明.它会告诉浏览器如何渲染你的HTML.
2.Tidy Head Section
设置title,字符集.将CSS和JS外链(包括一个打印用的CSS).
3.Body IDed
给body一个ID.这里作者提到的原因是.为多页面的中容器选择提供便利.比如通过给page1和page2中BODY设置不同的ID.就可以通过#page1 h2和#page2 h2来设置两种不同的效果.我感觉这个到是要看情况和具体架构再具体使用.
4.Semantically Clean Menu
编写符合语意的菜单代码.
<div id=”menu”>
<ul>
<li><a href=”index.php”>Home</a></li>
<li><a href=”about.php”>About</a></li>
<li><a href=”contact.php”>Contact</a></li>
</ul>
</div>
5.Main DIV for all Page Content
要有一个主体DIV包含所有的内容.方便固定主体的宽度,边距等等.
6.Important Content First
先写主要内容,再写次要内容.如果你的导航或者侧边栏不是很重要,最好将他们写在最后.
7.Common Content INCLUDED
将导航,页尾等公用的部分用动态调用的方式引入,比如PHP的include.
8.Code is Tabbed into Sections
缩进代码.
9.Proper Ending Tags
注意结束标签
10.Hierarchy of Header Tags
在合适的地方使用标题标签,如<h1>~<h6>,来划分段落.
11.Content, Content, Content
使用合适的标签,和标志代码,用© 表示©,不要使用</br>
12.No Styling!
不要把样式写在标签上.HTML只是用来表示结构.表现还是交给CSS吧.
原文地址:http://css-tricks.com/what-beautiful-html-code-looks-like/
大家都知道引用外部CSS有两种方法.
一种为HTML的<link>标签.
一种为CSS的@import url命令.
他们的具体使用方法就不多说了.单从外用引用CSS的功能上是一样的.
不过 link 与 @import 在显示效果上还是有很大区别的.基本上来看 link 的加在会在页面显示之前全部加载完.而@import 会是读取完文件之后加载。IE下@import加载页面时开始的瞬间会有闪烁（无样式表的页面），然后才恢复正常（加载样式后的页面），而Link没有这个问题。
如果你问我这是怎么回事儿?…..
那我也只能回答你.TMD谁知道呢…..-_-b
其实这是IE的一个BUG.而且还是一个非常不符逻辑的BUG(IE就出这种事儿!).
好在我们还有个非常不符合逻辑的解决方案.
经过和蚂蚁和末末茶的讨论.
我们在@import的前面用<link>标签引入一个CSS……..
可以将这个link引到一个打印的CSS上(print.css).或者一个根本不存在的CSS(empty.css).
“伟大”的IE真是让人匪夷所思……
还有一篇英文原文也是说这种BUG的.
文中提到还可以使用<script>标签来解决此BUG…-_-b.
再次感叹一下…
http://www.brightlemon.com/web-design/blog/?p=27
来列一个完整xhtml的结构标签：
结构
body, head, html, title
文本
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
链接
a
列表
dl, dt, dd, ol, ul, li
表单
form, input, label, select, option, textarea
表格
caption, table, td, th, tr
图片
img
对象
object, param
meta
meta
外部调用
link
基本
base
Copyright © 2008 www.iakira.com All rights reserved.
