ie下中英文混排时文字基线高低不一致bug

七月 22, 2009 by zhanbin
分类：web标准

首先看个代码

<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>

^?View Code CSS

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. 设定字体全为宋体。

^?View Code CSS

1	ul li h3{ margin:22px 0 0 39px;color:#333333; font-size:14px; font-family: "宋体";}

但是应用此种方法后英文字体不是很美观，所有就有了第二种方法。

2.设定英文字体为 Arial，中文字体为宋体。同时设定行高line-height为1.231.

^?View Code CSS

1	ul li h3{ margin:22px 0 0 39px;color:#333333; font-size:14px; font-family: Arial, "宋体"; line-height:1.231}

标签： css, ie6, xhtml

safari 的css hack

十一月 25, 2008 by zhanbin
分类：web标准

safari 是apple公司的浏览器产品，虽然用的人不多，并且在绝大部分情况下safari对css的解释和firefox没什么差别，但是就那么一点点的区别可能会让很多精益求精的人挠头。所以有时候还是需要些hack来区分safari同其他浏览器。

代码如下：

^?View Code CSS

< !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">
<!--
 
#example{ color:red;font-size:50px;} /* ff有效 */
/*\*/
 
html*#example {
[color:black;color:blue;/* Safari有效 */]
color:green;/* IE有效 */
[font-size:12px;font-size:20px;]
 font-size:12px;
}/**/
 
-->
</style>
 
</head>
 
<body>
<div id="example">IE下 绿色 12像素  
safari 下蓝色 20像素
firefox 红色 50像素</div>
 
</body>
</html>

方括号中的属性在safari下可以识别，但是需要注意的一点是方括号中的属性需要同时写2个，第一个是不显现的，第二个才是要在safari下显现的属性。

例子中：
IE下显示为绿色12像素
safari下显示为蓝色20像素
firefox下显示为红色50像素

demo

标签： css, hack, safari

Dreamweaver 的svn扩展

十一月 21, 2008 by zhanbin
分类：web标准

4 评论

一直以来很多人使用Dreamweaver来写css和xhtml。同时如果是应用于一个多人开发的项目的时候大家会使用svn或cvs来做版本控制的工作。但是可惜的是Dreamweaver一直到cs4 才内置了svn操作工具。开始刚拿到cs4的时候真的欣喜若狂，内置的svn将使开发变得更快速，合作变得更紧密。但是随之而来的是Dreamweaver自带的svn工具与大家常用的工具tortoiseSVN 有冲突，必须使用adobe 提供的python写的工具来转换。如果你的电脑没有python程序时还需要先额外安装一个python程序。这样还不算完当你在转换数据以后又使用了tortoiseSVN更新文件时，你还需要使用转换工具来重新再转换一次数据。

同步和协作开发非但没有变得快捷和无缝，反而变得更麻烦了。其实这个问题可以使用第三方的扩展来实现，这个扩展就是 SVN4DW 。SVN4DW 是直接调用tortoiseSVN，所以用过tortoiseSVN的人几乎无障碍上手。

安装后重启Dreamweaver可以在菜单栏上看到svn菜单，也可以在文件管理器的邮件菜单中找到。

svn4dw

下载svn4dw

标签： css, dreamweaver, svn

margin边界叠加问题以及ie和Firefox的不同解释

十一月 19, 2008 by zhanbin
分类：web标准

使用google搜索margin 边界叠加边界的时候，搜索出来的每一篇文章详细的说明了 margin边界叠加的原理。但是在某些浏览器和一起其他style存在的时候边界的实际叠加情况并不按照边界叠加原理展现。

在ie6，ie7 中，如果一个容器

在ie6，ie7 中，如果一个容器<div class="f" />包含了一个子容器<div class="s" />的时候有以下几种情况：

^?View Code HTML

< !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, xhtml

从视觉上告诉用户哪些是新开窗口的链接

十一月 17, 2008 by zhanbin
分类：web标准

5 评论

现在很多人都开始研究使用css + div 布局了，所以大家应该差不多都听说过在xtml严格模式下不能使用target=’_blank’ 来打开新窗口了. 这样的规定很多人觉得没有必要,嘿嘿,当然,我也是其中之一.不过想想老外在制定这个规则的时候可能从用户角度觉得不经用户允许就新弹出一个新窗口是不对的.所以制定了这样的限制.但是,如果我们在视觉上告诉用户某一个链接是打开新窗口呢? 就像下面的简单代码就能实现.

^?View Code HTML

<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 模式的新开窗口方法：

^?View Code HTML

< !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 的方式可以用以下方式替换：

^?View Code JAVASCRIPT

if(window.attachEvent) { //ie
	window.attachEvent("onload", outlinks);
}
else if(window.addEventListener) {
	window.addEventListener('DOMContentLoaded', outlinks, false);
}

标签： css, js

修改wordpress侧边栏tagcloud样式

十一月 12, 2008 by zhanbin
分类：wordpress

4 评论

wordpress的侧边栏中可以添加的widget中包行一个标签云的功能。这里可以把你正在使用的tag以百分比的多少分别以多种字体大小显示出来，可以让浏览者从tag的大小上看出该tag的使用频率。

但是wordpress并没有指定行高，所有有时候很大的字和很小的字在一起是很小的字就很难点击到，给用户使用造成不便。其实这个问题可以通过简单的css来搞定。

^?View Code CSS

#sidebar  .widget_tag_cloud a:link,
#sidebar  .widget_tag_cloud a:visited{ 
color:#A91B33;
text-decoration:none;
line-height:26px;
}
#sidebar  .widget_tag_cloud a:hover{
color:#fff;
background-color:#A91B33;
text-decoration:none;}/*tag链接样式*/

这样就设置了tag云图的行高。

另外，因为wordpress 是老外开发的，很多文字字体大小不符合中文显示，所以我们还要改下tag显示的文字字号，包括最小字号和最大字号：

打开wp-includes\category-template.php 找到如下代码（应该有2处）：

^?View Code PHP

1	'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45

将内容改成如下所示：

^?View Code PHP

1	'smallest' => 12, 'largest' => 24, 'unit' => 'px', 'number' => 45

ie下中英文混排时文字基线高低不一致bug

safari 的css hack

Dreamweaver 的svn扩展

margin边界叠加问题以及ie和Firefox的不同解释

从视觉上告诉用户哪些是新开窗口的链接

修改wordpress侧边栏tagcloud样式

CSS Sprites2 – It’s JavaScript Time

分类

按日期浏览

链接

最新文章

ie下中英文混排时文字基线高低不一致bug

safari 的css hack

Dreamweaver 的svn扩展

margin边界叠加问题以及ie和Firefox的不同解释

从视觉上告诉用户哪些是新开窗口的链接

修改wordpress侧边栏tagcloud样式

CSS Sprites2 – It’s JavaScript Time

分类

按日期浏览

标签云图

链接

最新文章