DIV+CSS解决IE6，IE7，IE8，FF兼容问题

作者:【三石】日期:2010-06-27

1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了
<meta http-equiv="x-ua-compatible" content="ie=7" />

2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决，比如
margin-left:10px !important;;
margin-left:5px;
+height:120px;

5.有时候，会在布局的时候，发现，有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现，解决的办法就是清除一下浮动，在设置过浮动的那个DIV下面加一个DIV，CSS面写个clear:both;如下<div style="float:left;height:100px; width:500px;">
<div style="clear:both;">
<div style="height:100px; width=300px">

6. 再就是居中问题，这个问题在新手身上很多，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，我现在知道的，有这几个原因：1. 一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。2.就是你写了，但是宽度没用绝对宽度：而是用一个相对的宽度，想局中，必须用绝对宽度。-

分类:WEB标准 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 175

网站视觉设计常用达标尺寸

作者:【三石】日期:2009-11-25

1、800*600下，网站页面宽度保持在778以内，就不会呈现水平滚动条，高度则视版面和内容内容决定。
2、1024*768下，网站页面宽度保持在1002以内，假如满框呈现的话,高度是612-615之间.就不会呈现水平滚动条和垂直滚动条。
3、在ps里面做网站页面在800*600状态下呈现全屏，页面的下方又不会呈现滑动条，尺寸为740*560左右
4、在PS里做的图到了网上就不相同了，颜色等等方面，由于ＷＥＢ上面只用到２５６ＷＥＢsafe色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的显像.
页面达标按800*600分辨率制作，实际尺寸为778*434px
页面长度原则上不超过3屏，宽度不超过1屏
每个达标页面为A4幅面大小，即8.5X11英寸
全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px
另外120*90，120*60也是小图标的达标尺寸
每个非首页非Dynamic（动态）页面含图片字节不超过60K，全尺寸banner不超过14K
达标网站页面广告尺寸规格一、120*120，这种广告规格适用于产业商品或最新新闻照片展示。
二、120*60，这种广告规格主要用于做LOGO应用。
三、120*90，主要实际运用于产业商品演示或大型LOGO。
四、125*125，这种规格适于表现照片效果的图像广告。
五、234*60，这种规格适用于FRAME或左右形式主页的广告Link。
六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。
七、468*60，实际运用最为广泛的广告条尺寸，用于页眉或页脚。
八、88*31，主要用于网站页面Link，或网站小型LOGO。
广告形式       像素大小                               最大尺寸          备注
BUTTON       120*60(必需用gif)                   7K
                     215*50(必需用gif)                   7K
通栏                760*100                                  25K             非Dynamic（动态）图片或递减运动效果
                     430*50                                     15K
超级通栏       760*100 to 760*200             共40K          非Dynamic（动态）图片或递减运动效果
巨幅广告       336*280                                  35K
                     585*120
竖边广告       130*300                                  25K
全屏广告       800*600                                  40K             必需为非Dynamic（动态）图片，FLASH各式
图文混排                                                                               各频道不相同 15K

弹出窗口       400*300(尽量用gif)                40K
BANNER       468*60(尽量用gif)                18K
悬停按钮       80*80(必需用gif)                   7K
流CCTV          300*200（可做不规则形状但尺寸不能超过300*200） 30K 播放日期小于5秒60帧(1秒/12帧)
网站页面中的广告尺寸
1.首页右上，尺寸120*60    2.首页顶部通栏，尺寸468*60    3.首页顶部通栏，尺寸760*60
4.首页中部通栏，尺寸580*60 5.内页顶部通栏，尺寸468*60 6.内页顶部通栏，尺寸760*60
7.内页左上，尺寸150*60或300*300 8.下载到本地地址页面，尺寸560*60或468*60
9.内页底部通栏，尺寸760*60    10.左漂浮，尺寸80*80或100*100
11.右漂浮，尺寸80*80或100*100以上几种说法估计有点小的出入，大家探讨一下。
IAB和EIAA发布新的intercc广告尺寸达标

分类:WEB标准 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 222

css常用命名规则

作者:【三石】日期:2009-06-18

　　头：header　　
　　内容：content/container　　
　　尾：footer　　
　　导航：nav　　
　　侧栏：sidebar
　　栏目：column　　
　　页面外围控制整体布局宽度：wrapper　　
　　左右中：left right center　　
　　登录条：loginbar　　
　　标志：logo　　
　　广告：banner　　
　　页面主体：main　　
　　热点：hot　　
　　新闻：news
　　下载：download　　
　　子导航：subnav　　
　　菜单：menu　　
　　子菜单：submenu　　
　　搜索：search　　
　　友情链接：friendlink　　
　　页脚：footer　　
　　版权：copyright　　
　　滚动：scroll　　
　　内容：content
　　标签页：tab
　　文章列表：list
　　提示信息：msg
　　小技巧：tips
　　栏目标题：title
　　加入：joinus
　　指南：guild
　　服务：service
　　注册：regsiter
　　状态态：status
　　投票：vote
　　合作伙伴：partner
　　
　　注释的写法
　　
　　/* Footer */
　　内容区
　　/* End Footer */
　　
　　id的命名
　　容器: container
　　页头：header
　　内容：content/container
　　页面主体：main
　　页尾：footer
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
　　左右中：left right center
　　
　　
　　id的命名
　　
　　页面结构
　　
　　容器: container
　　页头：header
　　内容：content/container
　　页面主体：main
　　页尾：footer
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
　　左右中：left right center
　　
　　导航
　　
　　导航：nav
　　主导航：mainbav
　　子导航：subnav
　　顶导航：topnav
　　边导航：sidebar
　　左导航：leftsidebar
　　右导航：rightsidebar
　　菜单：menu
　　子菜单：submenu
　　标题: title
　　摘要: summary
　　
　　功能
　　标志：logo
　　广告：banner
　　登陆：login
　　登录条：loginbar
　　注册：regsiter
　　搜索：search
　　功能区：shop
　　标题：title
　　加入：joinus
　　状态：status
　　按钮：btn
　　滚动：scroll
　　标签页：tab
　　文章列表：list
　　提示信息：msg
　　当前的: current
　　小技巧：tips
　　图标: icon
　　注释：note
　　指南：guild
　　服务：service
　　热点：hot
　　新闻：news
　　下载：download
　　投票：vote
　　合作伙伴：partner
　　友情链接：link
　　版权：copyright
　　
　　class的命名
　　
　　(1)颜色:使用颜色的名称或者16进制代码,如
　　.red { color: red; }
　　.f60 { color: #f60; }
　　.ff8600 { color: #ff8600; }
　　
　　(2)字体大小,直接使用"font+字体大小"作为名称,如
　　.font12px { font-size: 12px; }
　　.font9pt {font-size: 9pt; }
　　
　　(3)对齐样式,使用对齐目标的英文名称,如
　　
　　.left { float:left; }
　　.bottom { float:bottom; }
　　
　　(4)标题栏样式,使用"类别+功能"的方式命名,如
　　.barnews { }
　　.barproduct { }
　　
　　注意事项
　　
　　1.一律小写;
　　2.尽量用英文;
　　3.不加中杠和下划线;
　　4.尽量不缩写，除非一看就明白的单词.
　　主要的 master.css
　　模块 module.css
　　基本共用 base.css
　　布局，版面 layout.css
　　主题 themes.css
　　专栏 columns.css
　　文字 font.css
　　表单 forms.css
　　补丁 mend.css
　　打印 print.css

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn“等等。

CSS书写规范及方法

一. 常规书写规范及方法

1. 选择DOCTYPE：

XHTML 1.0 提供了三种DTD声明可供选择：

过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：
XML/HTML代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：
XML/HTML代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：
XML/HTML代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

关于DTD您可以参考：
http://www.chinaz.com/Design/Pages/0Z515A12007.html

2. 指定语言及字符集：

为文档指定语言：
XML/HTML代码
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：
常用的语言定义：
XML/HTML代码
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

标准的XML文档语言定义：
XML/HTML代码
<?xml version=”1.0″ encoding=” utf-8″?>

针对老版本的浏览器的语言定义：
XML/HTML代码
<meta http-equiv=”Content-Language” content=” utf-8″ />

为提高字符集，建议采用“utf-8”。

3. 调用样式表：

外部样式表调用：

页面内嵌法：就是将样式表直接写在页面代码的head区。如：
XML/HTML代码
<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>

外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。
XML/HTML代码
<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />

在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

4、选用恰当的元素：

根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。例如，使用P元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；

避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；

尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；

5、派生选择器：

可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：
XML/HTML代码
.mainMenu ul li {background:url(images/bg.gif;)}

关于选择器，您可以参考：
http://www.52css.com/search.asp?SearchContent=%E9%80%89%E6%8B%A9%E5%99%A8&searchType=title

6、辅助图片用背影图处理：

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：
XML/HTML代码
#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

7、结构与样式分离：

在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写：

页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：
XML/HTML代码
<div id=”mainMenu”> <ul> <li><a href=”#” >首页</a></li> <li><a href=”#” >介绍</a></li> <li><a href=”#” >服务</a></li> </ul> </div> /*=====主导航=====*/ #mainMenu { width:100%; height:30px; background:url(images/mainMenu_bg.jpg) repeat-x; } #mainMenu ul li { float:left; line-height:30px; margin-right:1px; cursor:pointer; } /*=====主导航结束=====*/

9、鼠标手势：

在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;”

二．注释书写规范

1、行间注释：

直接写于属性值后面，如：
XML/HTML代码
.search{ border:1px solid #fff;/*定义搜索输入框边框*/ background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/ }

2、整段注释：

分别在开始及结束地方加入注释，如：
XML/HTML代码
/*=====搜索条=====*/ .search { border:1px solid #fff; background:url(../images/icon.gif) no-repeat #333; } /*=====搜索条结束=====*/

关于注释，您可以参考：
http://www.52css.com/search.asp?SearchContent=%E6%B3%A8%E9%87%8A&searchType=title

三．样式属性代码缩写

1、不同类有相同属性及属性值的缩写：

对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：
XML/HTML代码
#mainMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:30px; overflow:hidden; } #subMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:20px; overflow:hidden; }

两个不同类的属性值有重复之处，刚可以缩写为：
XML/HTML代码
#mainMenu,#subMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; overflow:hidden; } #mainMenu {height:30px;} #subMenu {height:20px;}

2、同一属性的缩写：

同一属性根据它的属性值也可以进行简写，如：
XML/HTML代码
.search { background-color:#333; background-image:url(../images/icon.gif); background-repeat: no-repeat; background-position:50% 50%; } .search { background:#333 url(../images/icon.gif) no-repeat 50% 50%; }

3、内外侧边框的缩写：

在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：
XML/HTML代码
.btn { margin-top:10px; margin-right:8px; margin-bottom:12px; margin-left:5px; padding-top:10px; padding-right:8px; padding-bottom:12px; padding-left:8px; }

则可缩写为：
XML/HTML代码
.btn { Margin:10px 8px 12px 5px; Padding:10px 8px 12px 5px; }

而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：
XML/HTML代码
.btn { margin-top:10px; margin-right:5px; margin-bottom:10px; margin-left:5px; }

缩写为：
XML/HTML代码
.btn {margin:10px 5px;}

而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：
XML/HTML代码
.btn { margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px; }

缩写为：
XML/HTML代码
.btn{margin:10px;}

4、颜色值的缩写：

当RGB三个颜色值数值相同时，可缩写颜色值代码。如：
XML/HTML代码
.menu { color:#ff3333;}

可缩写为:
XML/HTML代码
.menu {color:#f33;}

关于缩写您可以参考：
http://www.chinaz.com/Design/Pages/0H333U32008.html

四．hack书写规范

因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。

1、 IE6、IE7、Firefox之间的兼容写法：

写法一：
XML/HTML代码
IE都能识别*;标准浏览器(如FF)不能识别*； IE6能识别*，但不能识别 !important, IE7能识别*，也能识别!important; FF不能识别*，但能识别!important; 根据上述表达，同一类/ID下的CSS 　hack可写为： .searchInput { background-color:#333;/*三者皆可*/ *background-color:#666　!important; /*仅IE7*/ *background-color:#999; /*仅IE6及IE6以下*/ }

一般三者的书写顺序为：FF、IE7、IE6.

写法二：

IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：
XML/HTML代码
.searchInput { background-color:#333;/*通用*/ _background-color:#666;/*仅IE6可识别*/ }

写法三：
XML/HTML代码
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。 .searchInput {background-color:#333;} *html .searchInput {background-color:#666;}/*仅IE6*/ *+html .searchInput {background-color:#555;}/*仅IE7*/

屏蔽IE浏览器：

select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
XML/HTML代码
*:lang(zh) select {font:12px !important;} /*FF的专用*/ select:empty {font:12px !important;} /*safari可见*/

IE6可识别：

这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
XML/HTML代码
select { display /*IE6不识别*/:none;}

IE的if条件hack写法：

所有的IE可识别：
XML/HTML代码
<!–[if IE]> Only IE <![end if]–> 只有IE5.0可以识别: <!–[if IE 5.0]> Only IE 5.0 <![end if]–> IE5.0包换IE5.5都可以识别: <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–> 仅IE6可识别: <!–[if lt IE 6]> Only IE 6- <![end if]–> IE6以及IE6以下的IE5.x都可识别: <!–[if gte IE 6]> Only IE 6/+ <![end if]–> 仅IE7可识别: <!–[if lte IE 7]> Only IE 7/- <![end if]–>

关于CSS HACK和BUG您可以参考：
http://www.chinaz.com/Design/Rules/0G43295H008.html
http://www.chinaz.com/Design/Rules/0P53464R008.html

2、清除浮动：

在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
XML/HTML代码
select:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }

分类:WEB标准 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 263

IE6 IE7 IE8 FF的兼容性问题书写格式

作者:【三石】日期:2009-06-12

background:green; /* for firefox */

*background:red !important; /* for IE7 */

*background:red; /* for IE6 */

分类:WEB标准 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 307

元素的class与ID命名常用关键字

作者:【三石】日期:2009-05-15

由于项目中编写文档结构、编写CSS的人员较多，并与程序员协同工作，就需要统一class与id的名称，前天花了一点时间，按照大多人的习惯，制定了下面的常用关键字：

容器：container/box
头部：header
主导航：mainNav

分类:WEB标准 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 297

CSS样式命名规则(仅供参考)

作者:【三石】日期:2009-05-15

1.样式命名
外　套：　　wrap
主导航：　　mainnav
子导航：　　subnav
页　脚：　　footer

分类:WEB标准 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 302

企业网站常用中英文对照表

作者:【三石】日期:2009-05-15

　　门户网站 portals website

　　网站导航 site map

　　公司简介 profile / company profile / company

分类:WEB标准 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 284

DIV+CSS 实现完美居中

作者:【三石】日期:2009-05-05

DIV+CSS居中我一直都是用的JS，当然JS解决的很完美~

我的炫酷导航(NavSYS) 就是使用的JS定位，然后用JS做出各种移动计算。算法很土。

下面我们看看CSS版的吧~其实不难。

说下原理吧。其实就是建立一个 DIV 像素为0.作为拘束的容器，设置它的位置，居中。然后建立一个实际存放内容的DIV来存放要的内容，那么DIV默认是置顶，靠左的。利用这个原理，使他浮动，然后控制它的外间距为高宽的一半。

好了下面看代码，配合上面的看会很清晰。

<!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" xml:lang="utf-8" lang="utf-8">
   <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="utf-8" />
        <style type="text/css">
            /*居中层CSS*/
            #center
            {
                height:0px;
                width:0px;

                /*设置位置*/
                top:50%;
                left:50%;
                position:absolute;
            }

            /*内容层CSS*/
            #content
            {
                background:#000;
                width:150px;
                height:80px;

                /*设置浮动，脱离居中层限制（菜单什么很有用哦）*/
                position:absolute;

                /*这里设置的2个值，第一个是宽，第二个是高，但都是这个DIV的宽高的一半*/
                margin:-75px 0 0 -40px;

                /*演示用*/
                color:#fff;
            }
        </style>
        <title>DIV居中</title>
   </head>
   <body>
        <div id="center">
           <div id="content">
               这里是内容！
           </div>
        </div>
   </body>
</html>

怎样看懂了么。没什么难度了吧~

不过JS，还是这个都存在一个缺陷，就是小屏幕的情况下，没有滚动条也看不全。

下面是一个运用了这个的演示网站，当然我自己的，也没开始做，策划ING。
www.phpgto.net

还有一个网站也用了~比较华丽炫酷~不过目前机密开发暂不泄露。

分类:WEB标准 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 357

XHTML标准初始页面

作者:【三石】日期:2009-05-05

今天，写《JS 连续滚动，完美版兼容多浏览器》的演示的时候，需要一个标准页面，才想到的~~~
呃~~好久没写页面了~~~一般程序头尾包住后就~~~~唉~~

这个东西没什么好说的，下载地址如下：
http://www.phptext.net/_Download/W3C_XHTML.zip

不下的看代码也行~~~
GBK

<!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" xml:lang="zh-cn" lang="zh-cn">
   <head>
        
        
        
        
        
        
        

        
        <meta http-equiv="content-type" content="text/html; charset=gb2312" />
        <meta http-equiv="content-language" content="zh-cn" />

        
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <meta name="copyright" content="" />
        <meta name="robots" content="all" />
        <meta name="generator" content="" />

        
        <meta http-equiv="expires" content="0" />
        <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
        <meta http-equiv="pragma" content="No-cach" />
        <meta http-equiv="widow-target" content="_top" />
        <meta http-equiv="msthemecompatible" content="yes" />

        
        <link href="" type="image/x-icon" rel="icon" />
        <link href="" type="image/x-icon" rel="shortcut icon" />
        <link href="" type="text/css" title="" rel="alternate stylesheet" />
        <link href="" type="text/css" title="" rel="stylesheet" />

        
        <script type="text/javascript" src=""></script>

        
        <title></title>
   </head>
   <body>
   </body>
</html>

UTF8

<!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" xml:lang="utf-8" lang="utf-8">
   <head>
        
        
        
        
        
        
        

        
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="utf-8" />

        
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <meta name="copyright" content="" />
        <meta name="robots" content="all" />
        <meta name="generator" content="" />

        
        <meta http-equiv="expires" content="0" />
        <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
        <meta http-equiv="pragma" content="No-cach" />
        <meta http-equiv="widow-target" content="_top" />
        <meta http-equiv="msthemecompatible" content="yes" />

        
        <link href="" type="image/x-icon" rel="icon" />
        <link href="" type="image/x-icon" rel="shortcut icon" />
        <link href="" type="text/css" title="" rel="alternate stylesheet" />
        <link href="" type="text/css" title="" rel="stylesheet" />

        
        <script type="text/javascript" src=""></script>

        
        <title></title>
   </head>
   <body>
   </body>
</html>

其中什么机器人啊什么的都是正常的，唯独那个 msthemecompatible 这个是关闭XP样式的。
就是说按钮在没有设置的情况下，也是使用传统的按钮~~~不会说根据大家系统出现不同的按钮样式~

分类:WEB标准 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 319

ie6-ie7-fox 兼容问题汇总

作者:【三石】日期:2009-05-05

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.

1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)

3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题
主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；
对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释.

#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

分类:WEB标准 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 271