ie下中英文混排时文字基线高低不一致bug
首先看个代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <ul> <li> <h3>密码找回</h3> <div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div> </li> <li> <h3>账号安全</h3> <div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div> </li> <li> <h3>邮箱续费</h3> <div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div> </li> <li> <h3>VIP朋友</h3> <div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div> </li> <li> <h3>邮箱续费</h3> <div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div> </li> </ul> |
1 2 3 4 | ul li{ width:134px; float:left;} ul li h3{ margin:22px 0 0 39pxcolor:#333333; font-size:14px; } ul li .indexH3Intro{ line-height:18px; color:#666666; width:110px; margin:14px 0 22px 15px; overflow:hidden; height:55px;} ul li p{ margin-left:15px;} |
在ie下可以看到h3文字的下边线并不在同一条线上
解决此问题的方法有2种：
1. 设定字体全为宋体。
1 | ul li h3{ margin:22px 0 0 39px;color:#333333; font-size:14px; font-family: "宋体";} |
但是应用此种方法后英文字体不是很美观，所有就有了第二种方法。
2.设定英文字体为 Arial，中文字体为宋体。同时设定行高line-height为1.231.
1 | ul li h3{ margin:22px 0 0 39px;color:#333333; font-size:14px; font-family: Arial, "宋体"; line-height:1.231} |
ie6 :hover bug
ie6 的 :hover bug很多blog都有介绍，普遍的说法是 给 :hover 定一个 display:block； 这其实只是一个方面。 其实 a内部嵌套的元素的css 属性也会影响 :hover 的触发。例如: position。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <div class="pos6"> <div class="pos posL"><a href="#"> <div></div> <img src="../../images/app_photo/photo3.gif" alt="" class="pic" /></a></div> <div class="pos posR"><a href="#"> <div></div> <img src="../../images/app_photo/photo3.gif" alt="" class="pic" /></a></div> </div> .pos6 .pos a:hover{ display:block; border:none; width:116px; overflow:hidden;} .pos6 .pos{ width:116px; display:block; position:absolute;} .pos6 .posL{ top:0; left:0;} .pos6 .posR{ top:0; right:0;} .pos6 .pos a .pic{ display: none;} .pos6 .pos a:hover .pic{ display: block; width:80px; width:80px; float:right; border:solid 1px #ccc;} .pos6 .posR a:hover .pic{ display: block; margin-left:0; float: left} .pos6 .pos a div{ background: url(../../images/app_photo/btn.gif) no-repeat left top; width:19px; height:55px; float:left; cursor:pointer; *cursor:hand;} .pos6 .posR a div{ background: url(../../images/app_photo/btn.gif) no-repeat -48px top; float:right;} .pos6 .pos a:hover div{ background: url(../../images/app_photo/btn.gif) no-repeat left -50px; width:19px; height:55px; float:left;} .pos6 .posR a:hover div{ background: url(../../images/app_photo/btn.gif) no-repeat -48px -50px; float:right;} |
当 img的css属性中有positon 时， 图片在:hover 的时候不会显示的。
safari 的css hack
safari 是apple公司的浏览器产品，虽然用的人不多，并且在绝大部分情况下safari对css的解释和firefox没什么差别，但是就那么一点点的区别可能会让很多精益求精的人挠头。所以有时候还是需要些hack来区分safari同其他浏览器。
代码如下：
方括号中的属性在safari下可以识别，但是需要注意的一点是方括号中的属性需要同时写2个，第一个是不显现的，第二个才是要在safari下显现的属性。
例子中：
IE下显示为 绿色12像素
safari下显示为 蓝色20像素
firefox下显示为 红色50像素
Dreamweaver 的svn扩展
一直以来很多人使用Dreamweaver来写css和xhtml。同时如果是应用于一个多人开发的项目的时候大家会使用svn或cvs来做版本控制的工作。但是可惜的是Dreamweaver一直到cs4 才内置了svn操作工具。开始刚拿到cs4的时候真的欣喜若狂，内置的svn将使开发变得更快速，合作变得更紧密。但是随之而来的是Dreamweaver自带的svn工具与大家常用的工具tortoiseSVN 有冲突，必须使用adobe 提供的python写的工具来转换。如果你的电脑没有python程序时还需要先额外安装一个python程序。这样还不算完当你在转换数据以后又使用了tortoiseSVN更新文件时，你还需要使用转换工具来重新再转换一次数据。
同步和协作开发非但没有变得快捷和无缝，反而变得更麻烦了。其实这个问题可以使用第三方的扩展来实现，这个扩展就是 SVN4DW 。SVN4DW 是直接调用tortoiseSVN，所以用过tortoiseSVN的人几乎无障碍上手。
安装后重启Dreamweaver可以在菜单栏上看到svn菜单，也可以在文件管理器的邮件菜单中找到。
margin边界叠加问题以及ie和Firefox的不同解释
使用google搜索margin 边界叠加边界的时候，搜索出来的每一篇文章详细的说明了 margin边界叠加的原理。但是在某些浏览器和一起其他style存在的时候边界的实际叠加情况并不按照边界叠加原理展现。
在ie6，ie7 中，如果一个容器
在ie6，ie7 中，如果一个容器<div class="f" />包含了一个子容器<div class="s" />的时候有以下几种情况：
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>边界叠加问题</title> </head> <body style="padding:20px; margin:0; font-size:14px; font-family:Verdana, Geneva, sans-serif; background-color:#000"> <div style=" width:300px; padding:10px;"> <div class="f" style="background-color:#efefef;"> <div class="s" style="margin-top:20px; border:1px solid #f00;">情况1 .f{ background-color:#efefef;} .s{ margin-top:20px; border:1px solid #f00;} ie和Firefox解释相同，margin叠加了，并叠加到了父容器上。 父容器使用子容器的margin-top，就像是父容器有一个margin-top一样。 </div> </div> </div> <div style=" width:300px; padding:10px;"> <div class="f" style="background-color:#efefef; height:250px;"> <div class="s" style="margin-top:20px; border:1px solid #f00;">情况2 .f{ background-color:#efefef;height:250px;} .s{ margin-top:20px; border:1px solid #f00;} 当父容器的高度被指定后，ie和 Firefox的表现就变得不一样了，Firefox的表现和情况1 一样。而在ie中，边界没有叠加，margin-top作用到了子容器.s中，在子容器和父容器之间出现了一个margin </div> </div> </div> <div style=" width:300px; padding:10px;"> <div class="f" style="background-color:#efefef; height:250px; overflow:hidden"> <div class="s" style="margin-top:20px; border:1px solid #f00;">情况3 .f{ background-color:#efefef; height:250px; overflow:hidden} .s{ margin-top:20px; border:1px solid #f00;} 当在父容器添加overflow:hidden 时，ie和Firefox的表现又一致了，和之前ie的表现一样，都是边界不叠加。 </div> </div> </div> <div style=" width:300px; padding:10px;"> <div class="f" style="background-color:#efefef; border-top:1px solid #f00"> <div class="s" style="margin-top:20px; border:1px solid #f00;">情况4 .f{ background-color:#efefef; height:250px; overflow:hidden} .s{ margin-top:20px; border:1px solid #f00;} 如果父容器包含border和padding属性时，边界不叠加,且不会将子容器的边界添加到父容器上。因为两个容器的边界不相连接。 </div> </div> </div> <div style=" width:300px; padding:10px;"> <div class="f" style="background-color:#efefef; padding-top:1px "> <div class="s" style="margin-top:20px; border:1px solid #f00;">情况5 .f{ background-color:#efefef; height:250px; overflow:hidden} .s{ margin-top:20px; border:1px solid #f00;} 如果父容器包含border和padding属性时，边界不叠加,且不会将子容器的边界添加到父容器上。因为两个容器的边界不相连接。 </div> </div> </div> </body> </html>
示例：margin边界叠加
从视觉上告诉用户哪些是新开窗口的链接
现在很多人都开始研究使用css + div 布局了，所以大家应该差不多都听说过在xtml严格模式下不能使用target=’_blank’ 来打开新窗口了. 这样的规定很多人觉得没有必要,嘿嘿,当然,我也是其中之一.不过想想老外在制定这个规则的时候可能从用户角度觉得不经用户允许就新弹出一个新窗口是不对的.所以制定了这样的限制.但是,如果我们在视觉上告诉用户某一个链接是打开新窗口呢? 就像下面的简单代码就能实现.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> <!-- * { margin:0; padding:0; } .c { margin:0 50px 15px 50px; border:1px dotted #9900ff; padding:10px; } a:link, a:visited { color:#60c; text-decoration:none; } a:hover { color:#333; } a.external { padding:0 7px 0 0; background:url(2_r2_c2.gif) no-repeat right top; } h4{ font-size:16px; margin-left:50px;} blockquote{ padding:30px 0;} --> </style> <script language="javascript" type="text/javascript"> function linkstyle(){ //var oj = document.getElementsByTagName('a'); //应用全页面的a 标签 var oj = document.getElementById('c').getElementsByTagName('a');//仅应用id为c的块内部的a标签 var j = 0; var i =0; //alert(oj.length) //alert(oj[2].target) while(j< =oj.length-1){ if(oj[j].target == '_blank'){ oj[j].className = 'external'; }else{ oj[j].className = ''; } j++; } } </script> <blockquote><h4>id="c"中</h4> <div class="c" id="c"> <p><a class="external" href="http://www.sina.com.cn" target="_blank">新开新窗口链接1</a></p> <p><a class="" href="http://mail.sina.com.cn">本页链接</a></p> <p><a class="external" href="http://vip.sina.com.cn" target="_blank">新开新窗口链接1</a></p> </div> <h4>不在id="c"中</h4> <div class="c" id="d"> <p><a href="#" target="_blank">新开新窗口链接1</a></p> <p><a href="#">本页链接</a></p> <p><a href="#" target="_blank">新开新窗口链接1</a></p> </div></blockquote> </script></head></html>
示例：/demo/blanklink/blanklink.html
下面是符合xhtml strict 模式的新开窗口方法：
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- * { margin:0; padding:0; } .c { margin:0 50px 15px 50px; border:1px dotted #9900FF; padding:10px; } a:link, a:visited { color:#60c; text-decoration:none; } a:hover { color:#333; } a.external { padding:0 7px 0 0; background:url(2_r2_c2.gif) no-repeat right top; } h4{ font-size:16px; margin-left:50px;} blockquote{ padding:30px 0;} --> </style> <script type="text/javascript" language="javascript"> function outlinks() { if (!document.getElementsByTagName) return; var anchors = document.getElementById("c").getElementsByTagName("a"); for (var i=0; i<anchors .length; i++) { var anchor = anchors[i]; if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external"){ anchor.target = "_blank"; anchor.className="external"; } } } window.onload = outlinks; </script> </anchors></script></head> <body> <blockquote><h4>id="c"中</h4> <div class="c" id="c"> <p><a href="http://www.sina.com.cn" rel="external">新开新窗口链接1</a></p> <p><a href="http://mail.sina.com.cn">本页链接</a></p> <p><a href="http://vip.sina.com.cn" rel="external">新开新窗口链接1</a></p> </div> <h4>不在id="c"中</h4> <div class="c" id="d"> <p><a href="#" rel="external">新开新窗口链接1</a></p> <p><a href="#">本页链接</a></p> <p><a href="#" rel="external">新开新窗口链接1</a></p> </div></blockquote> </body> </html>
示例：/demo/blanklink_strict/blanklink.html
其中：绑定windows onload 的方式可以用以下方式替换：
if(window.attachEvent) { //ie window.attachEvent("onload", outlinks); } else if(window.addEventListener) { window.addEventListener('DOMContentLoaded', outlinks, false); }
CSS Sprites2 – It’s JavaScript Time
CSS Sprites2 –
It’s JavaScript Time