给大家带来CSS HACK 办理兼容的写法二

另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
破洛洛文章简介：说说CSSHack和向后兼容.
人一旦习气了某些器材就很难往改，和林林总总的缘故原由，新的扫瞄器愈来愈多，而老的总减少不了。增加老是快于灭亡招致了扫瞄器兼容是成了谈不完的话题。说到扫瞄器兼容，CSSHACK天然而然地被我们想起。明天，我们一般都有一个团队大概将有一个团队的人在一个公司内里做不异的事，必要我们有一致的标准来举行Coding，以便利保护。而办理兼容的办法就是（必需是，由于这才最简单有成绩的）个中一个最主要的、要办理的标准之一。

登录/注册后可看大图

在办理兼容办法上，想定出一个一致的标准，团体以为应当以上面3点为基础准绳：

• 衡量本钱：在扫瞄器被减少后，怎样疾速清算失落无用代码
  
• 可保护：在资本本钱和完善间均衡的向后兼容
  
• 可读：省力、易记
  

这里把本钱放在了第一名，并非说我们不肯意寻求完善，而只是，太决心寻求完善偶然候大概会拦阻我们行进；在本钱后，应当是可保护和可读，这点关于团队的互助来讲相当主要，而终极了局也是为了削减本钱。
先把这三个准绳存起来，来看看我们平常办理兼容的写法（前面会附具体的Hack办法列表）：
1、CSS选择器Hack
/*Opera*/
@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0)
{head~body.sofish{display:block;}}
这类写法的优弱点是：

• 长处：周全，各类HACK都有；清算无用代码里易认
  
• 弱点：选择器称号不容易记；代码量多（要反复写选择器）
  

2、CSS属性Hack
.sofish{
padding:10px;
padding:9px9;/*allie*/
padding:8px;/*ie8-9*/
*padding:5px;/*ie6-7*/
+padding:7px;/*ie7*/
_padding:6px;/*ie6*/
}
这类写法的优弱点是：

• 长处：易记，代码少
  
• 弱点：不周全
  

<P>
破洛洛文章简介：说说CSSHack和向后兼容.

3、IE正文
<!--[ifIE]>IEonly<![endif]-->
<!--[if!IE]>NOTIE<![endif]-->
这类写法的优弱点是：

• 长处：平安；向后兼容好；易保护
  
• 弱点：用欠好会增添HTTP哀求；用得好代码又多
  

4、扫瞄器探测：JS/后端程序判别
//以jQuery为例，检测是不是是IE6，是则加上class="ie6"
if($.browser.msie&&$.browser.version=6){
$(div).addClass(ie6);
}
这类写法的优弱点是：

• 长处：周全；易保护；可读性高
  
• 弱点：占资本；代码量年夜（要重写选择器）
  

下面4种是我们最经常使用的办法。如今，让我们抽出内心存着的那3个准绳，看看怎样选择。要工夫思索一下么？这里复杂地说一下我的选择：
1、只管利用独自HACK
如许保护起来本钱对照低，修改不会影响其他的扫瞄器，而一旦有扫瞄器减少，只需搜刮关头字，就能够批量往失落这些代码。好比，ie6的独自hack：
_padding:6px;；
2、向后兼容的方针：1年
你想如今的网站兼容IE10么，谁不想，但这可预感性太低了，也能够说，本钱太高了。临时没需要。不外，IE9大概要公布了，以是，选择像
padding:8px;
如许的IE8+的hack，在删失落其他代码不影响向后兼容上，会更好；而且，假如IE10出来，一旦撑持这个hack，而又没有这个bug，大概删失落只影响2个扫瞄器，也会更便利；
3、尽量省资本
你如果不思索页面加载速率，不思索服务器接受才能的话，那在向后兼容和减少的处置上能够做得很完善（从代码上），但这从某种水平上，不如不做。

破洛洛文章简介：说说CSSHack和向后兼容.

5、团体保举写法
实在能够纠结的还真多，这里分离A-Grade扫瞄器的品种和HACK的品种，写两种团体以为对照公道的HACK和向后兼容相分身的写法，仅供人人参考的。
经济实惠型写法：注意独自的HACK。IE的HACK对照多，选择省力易记的属性HACK；其他扫瞄器HACK少，选择块状的选择器HACK(保举)

.sofish{
padding:10px;
padding:9px9;/*allie*/
padding:8px;/*ie8-9今朝使用于IE8的独自hack，情形对照少*/
*padding:5px;/*ie6-7*/
+padding:7px;/*ie7*/
_padding:6px;/*ie6*/
}
/*webkitandopera*/
@mediaalland(min-width:0px){.sofish{padding:11px;}}
/*webkit*/
@mediascreenand(-webkit-min-device-pixel-ratio:0){.sofish{padding:11px;}}
/*opera*/
@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){.sofish{padding:11px;}}
/*firefox*/
@-moz-documenturl-prefix(){.sofish{padding:11px;}}/*allfirefox*/
html>/**/body.sofish,x:-moz-any-link,x:default{padding:11px;}/*newestfirefox*/
准完善主义写法：共同IE正文，一概接纳选择器HACK（选择性保举）

HTML:增加bodyclass:
<!--[ifIE6]--><bodyclass="ie6"><![endif]-->
<!--[ifIE7]--><bodyclass="ie7"><![endif]-->
<!--[ifIE8]--><bodyclass="ie8"><![endif]-->
<!--[ifIE9]--><bodyclass="ie9"><![endif]-->
<!--[if!IE]--><bodyclass="non-ie"><![endif]-->
.sofish{padding:10px;}
.non-ie.sofish{padding:12px;}
.ie9.sofish{padding:9px;}
.ie8.sofish{padding:8px;}
.ie7.sofish{padding:7px;}
.ie6.sofish{padding:6px;}
/*webkitandopera*/
@mediaalland(min-width:0px){.sofish{padding:11px;}}

/*webkit*/
@mediascreenand(-webkit-min-device-pixel-ratio:0){.sofish{padding:11px;}}
/*opera*/
@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){.sofish{padding:11px;}}
/*firefox*/
@-moz-documenturl-prefix(){.sofish{padding:11px;}}/*allfirefox*/
html>/**/body.sofish,x:-moz-any-link,x:default{padding:11px;}/*newestfirefox*/
[/css]
<p>然后，从第二种体例我们也能够发明。把IE正文用在bodyclass上，而不是增加独自的<code><link/></code>大概<code>@import</code>会是更好的选择。固然分文件也是一种不错的选择，但了为页面加载速率，HTTP哀求一个都不克不及华侈。</p>
<p>至于使用JS大概后端程序来判别，除非你有充足的资本，除非你办理不了（90%不会产生），否则，其实不保举用。附上一个表（<arel="nofollow"href="viahttp://paulirish.com/2009/browser-specific-css-hacks/">via</a>），能够参考参考：</p>
<h3>六：周全的IE6+/Firefox/Webkit/OperaCSSHACK列表：</h3>
[cclang="css"]
/*****SelectorHacks******/
/*IE6andbelow*/
*html#uno{color:red}
/*IE7*/
*:first-child+html#dos{color:red}
/*IE7,FF,Saf,Opera*/
html>body#tres{color:red}
/*IE8,FF,Saf,Opera(EverythingbutIE6,7)*/
html>/**/body#cuatro{color:red}
/*Opera9.27andbelow,safari2*/
html:first-child#cinco{color:red}
/*Safari2-3*/
html[xmlns*=""]body:last-child#seis{color:red}
/*safari3+,chrome1+,opera9+,ff3.5+*/
body:nth-of-type(1)#siete{color:red}
/*safari3+,chrome1+,opera9+,ff3.5+*/
body:first-of-type#ocho{color:red}
/*saf3+,chrome1+*/
@mediascreenand(-webkit-min-device-pixel-ratio:0){
#diez{color:red}
}
/*iPhone/mobilewebkit*/
@mediascreenand(max-device-width:480px){
#veintiseis{color:red}
}
/*Safari2-3.1*/
html[xmlns*=""]:root#trece{color:red}
/*Safari2-3.1,Opera9.25*/
*|html[xmlns*=""]#catorce{color:red}
/*EverythingbutIE6-8*/
:root*>#quince{color:red}
/*IE7*/
*+html#dieciocho{color:red}
/*Firefoxonly.1+*/
#veinticuatro,x:-moz-any-link{color:red}
/*Firefox3.0+*/
#veinticinco,x:-moz-any-link,x:default{color:red}
/*****AttributeHacks******/
/*IE6*/
#once{_color:blue}
/*IE6,IE7*/
#doce{*color:blue;/*or#color:blue*/}
/*EverythingbutIE6*/
#diecisiete{color/**/:blue}
/*IE6,IE7,IE8*/
#diecinueve{color:blue9;}
/*IE7,IE8*/
#veinte{color/***/:blue9;}
/*IE6,IE7--actsasan!important*/
#veintesiete{color:blue!ie;}/*stringafter!canbeanything*/
其他的就未几说了。不外，仍是要提示一下:正文也是很主要的。固然是HACK了，但实际中情形偶然候比设想中的庞大很多，给代码一个正文，好过千言万语。
最初，仍是那句，但愿看到你更好的办法！
原文：
http://ued.alipay.com/2010/05/talk-about-css-hack-and-backward-compatibility/


这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+css+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了

由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

滚动条)层属性--溢出(visible/hidden/scroll/auto)

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。