Firefox下的text-indent

南芝 — Fri, 26 Sep 2008 00:19:06 +0000

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





无标题文档



我在右边 我在左边

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

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

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

首先看下 IE 7 下的显示：

我们再来看下 Firefox 3.0.2 下的显示：

为什么在 Firefox 下没有表现出来我们定义的属性呢？用 Firebug 看一下，发现不是没有表现，而是作用在了 span 上边，如下图所示：

另外在 IE 6、IE 8 Beta2、Opera 9.52、Safari 3.1.1、Google Chrome 0.2 下的测试结果与 IE 7 相同，你可以用不同的浏览器打开这个页面测试。到底是哪个表现比较正确呢？

如果真的需要使用 text-indent 的话不妨使用 padding-left 代替，以兼容 Firefox。

去掉pre标签在IE浏览器下的垂直滚动条

南芝 — Mon, 28 Jul 2008 09:29:07 +0000

首先，我们先看一下例子：

HTML 代码：

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
        oldonload();
        func();
        }
    }
}

function tagCloud() {
    if(document.getElementById("tags_cloud")) {
        var tags = document.getElementById("tags_cloud");
        var tagLinks = tags.getElementsByTagName("a");
        var styles = new Array();
        styles[0] = new Array("#FF0000","FFCC00","FF9900","#0099FF","#999999"); //设定字体的颜色随机的种类
        styles[1] = new Array("12px","14px","16px"); //设定字体的大小随机的种类
        styles[2] = new Array("400","500","600","700"); //设定字体的粗细随机的种类
        for(var i=0; iMath.random())]; //设定字体的颜色
            tagLinks[i].style.fontSize = styles[1][Math.floor(styles[1].lengthMath.random())]; //设定字体的大小
            tagLinks[i].style.fontWeight = styles[2][Math.floor(styles[2].length*Math.random())]; //设定字体的粗细
        }
    }
}

addLoadEvent(tagCloud);

CSS 代码：

pre { border:1px solid #0066FF; background:#F0F0F0; overflow:auto; padding:5px; width:400px; height:400px;}

这里，pre 的宽度和高度固定，所有浏览器的宽度和高度表现是统一的，滚动条内含在宽度和高度里边，带上滚动条和边框，我们所看到的宽度和高度都是 412px。可以在这里看到这一个版本的表现。

现在，让我们改变它的样式，将高度去掉。

CSS 代码：

pre { border:1px solid #0066FF; background:#F0F0F0; overflow:auto; padding:5px; width:400px;}

在 IE 浏览器下的表现是：

在其他现代浏览器下的表现是：

可以在这里看到展示，那么为什么会出现这种情况呢？我们再修改一下 CSS，将 pre 的宽度调大：

CSS 代码：

pre { border:1px solid #0066FF; background:#F0F0F0; overflow:auto; padding:5px; width:950px;}

所有浏览器的水平、垂直滚动条都消失了，可以在这里看到展示。也就是说，当出现水平滚动条的时候，IE 浏览器会同时出现垂直滚动条，而在其他现代浏览器上不会出现。但是这是什么原因呢？我推断可能的原因是：在 IE 下，当水平滚动条出现的时候，它会叠加在当前的高度内，造成垂直方向上的东西不能完全展现，以至于出现垂直滚动条，而在其他现代浏览器下，当水平滚动条出现时，是在当前的内容下添加的滚动条，没有占用已有的内容，不会对垂直方向上的显示造成影响，所以，没有出现垂直滚动条。不知道我的推测是否正确，期待高人的指点。

那么现在怎么解决 IE 下的滚动条呢，感觉看着别扭。如上所说，所需要做的仅仅是在 IE 浏览器下，当水平滚动条出现的时候将垂直滚动条隐藏，同时增加 pre 的下padding，这样子，就不会造成内容被隐藏，同时也去掉了垂直滚动条。我们使用 JS 实现我们想要的结果。

改进后的 CSS 代码：

pre { border:1px solid #0066FF; background:#F0F0F0; overflow:auto; padding:5px; width:400px;}
pre.specialPre { padding-bottom:20px; overflow-y:hidden;}

JavaScript 代码：

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
        oldonload();
        func();
        }
    }
}

function preClass() {
    if(document.all && document.getElementsByTagName) {
        var pres = document.getElementsByTagName("pre");
        for(var i=0; i 410) {
                pres[i].className = "specialPre";
            }
        }
    }
}

addLoadEvent(preClass);

这样子，就解决了在 IE 浏览器下的垂直滚动条的问题，可以在这里看到展示。

注：文中的其他现代浏览器指的是：Opera、Firefox、Safari，所测试的版本分别为Opera 9.51、Firefox 3.0.1、Safari 3.1.1 。

南芝 - 我才12岁（飞鸟尽，良弓藏，2011，背包去旅行！） » Firefox

Firefox下的text-indent

我在右边我在左边

去掉pre标签在IE浏览器下的垂直滚动条

南芝 - 我才12岁（飞鸟尽，良弓藏，2011，背包去旅行！） » Firefox

Firefox下的text-indent

我在右边 我在左边

去掉pre标签在IE浏览器下的垂直滚动条

我在右边我在左边