我才12 ?

文章关键字 ‘text-indent’

一个多月来的新淘江湖项目中,遇到了各种各样奇怪的东东,在这里记录一下哈~

首先是编辑器问题。。。被有脚鄙视了无数次了。。。囧~

1.text-indent与inline-block元素:

场景:
当text-indent使用在inline-block元素上时
问题:
在ie6下,将出现元素跟随text-indent左移的问题,其它浏览器正常。
解决方法:
不使用text-indent,改用font-size:0和line-height:200px。当此元素position:absolute时,表现正常。

如图:

txt-inline

Demo:点击查看

2.legend:

legend是一个十分怪异的东东,我一般很少很少去触及它,因为它真的很难搞,这次一不小心发了善心,结果它给我带来了各种各样的奇怪问题。

legend是fieldset元素的定义标题,fieldset可将表单内的相关元素进行分组,当然是用fieldset可实现一些特殊的效果,但是各浏览器对legend的呈现不一,给我们的使用带来了诸多麻烦。

1)legend的重置:legend需要重置margin、padding、color,但是IE6、IE7下的legend的margin-left需要设置为-7才能和其它浏览器呈现统一。

2)看图,legend和fieldset的位置,忘记了曾经遇到什么问题了。。。反正就是这个东西闹的。。。

legend

3)IE下legend死活不换行,Opera、Chrome、Safari下会自动换行,Firefox下需要给legend定义white-space:normal来搞定。

4)给legend加postion:relative后,Opera下会没入fieldset中,跟IE下相同,但是legend的换行依然有效。

Demo地址:点击查看

3.IE不支持url中文的自动转码~

4.需要小心type=”submit”的按钮:

如果需要为其注册submit事件,最好注册到form上,倘若在按钮上定义click事件,那么在用户使用enter时会出现问题。

5.IE7 的hover:

IE7 是支持hover伪类的,但是不管是用伪类,还是用js的mouseenter,它都会有一个问题,就是你必须将鼠标放到一个有东东的地方才会触发,也就是说,当你经过空白的时候是不会触发hover的,但是经过visibility:hidden的东东上时可以触发。解决的方法是给盒子加一个背景~此问题仅在ie7下有,很是怪异!

继续阅读 »

Firefox下的text-indent at 2008.9.26 8:08

前天在给豆豆调试东西的时候碰到的一个问题。在之前的一篇日志–“同一行中的左右两侧文字该怎么定位”里,我提到过一种方法,现在再来回顾下:

<!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=gb2312" />
<title>无标题文档</title>
<style>
h2 { background:#FFECC8; font-size:12px;}
h2 span { float:right;}
</style>
</head>
<body>
<h2><span>我在右边</span> 我在左边</h2>
</body>
</html>

这样子可以实现如下图所示的效果:

这时,我们给 h2 添加一个 CSS 属性:text-indent,看看会发生什么情况:

h2 { background:#FFECC8; font-size:12px; text-indent:2em;}

首先看下 IE 7 下的显示:

继续阅读 »

这位姐姐,你好,你的浏览器版本太低了,为了避免您中毒,请您升级您的浏览器!