CSS开发小结

最近做Web开发比较多，总结一下碰到的CSS技巧：

 

1、具有兼容性的层透明问题

大部分的人都习惯用IE特有的filter来制作半透明的Div层，可是碰到其他浏览器的时候怎么办？每个浏览器都有自己的透明语法，用下面方法将它们兼容起来是比较好的：

 

.layer{ position: absolute; width: 100px; height:100px; top:0; left:0; z-index:10; filter:alpha(opacity=60); /*支持IE*/ -moz-opacity:0.6; /*支持Firefox*/ opacity:0.6; /*支持其他浏览器*/ }

 

2、字体居中问题

定义一个span或者label之后，字体默认都是贴上方边界显示的，要让字体水平居中可以用text-align:center; 但是要让字体垂直居中，只能用line-height尽量设置一个跟span高度差不多的值来达到居中的效果

 

3、span和label的宽度问题

有时候定义一个span或者label在样式中设置了width:200px;可是实际上它们根据里面的内容自适应了width，这个时候需要给样式加上行块级设定才能强制规定其宽度（即加上display:inline-block;）

 

4、图片防止盗链

对于放在img标签中的图片，浏览时可以直接右键另存为图片复制下来，如果不希望被盗用可以将图片设置在某一个span的css属性background-image中，不过同时也会牺牲一些浏览器对img标签灵活特有的支持

 

5、html编辑器

自己做了一个html编辑器，原理有三种方式，比较倾向于使用iframe，然后设置其designMode='On';来达到可编辑的效果，其实替换选中部分的样式，很多例子都使用pasteHtml替换的方式，我试了试document对象本身带有的execCommand函数，可以使用简单的代码就达到同样的效果(举个简单例子)

 

<iframe class="htmlEditor" id="htmlEditor" marginWidth="0" marginHeight="0"></iframe> <button onClick="format('bold', '')">加粗</button> <mce:script type="text/javascript"><!-- function format(what,opt){ if (opt==null) htmlEditor.document.execCommand(what); else htmlEditor.document.execCommand(what,"",opt); htmlEditor.focus(); } // --></mce:script>