CSS 设置段落间距

bolo — Wed, 27 Jan 2010 07:10:24 +0000

段落间距网页设计里一个提升阅读体验的重要因素。但网页排版不想Word那样简单，你能否通过CSS有效率地设置段落间距呢？

网页设计里的文字排版问题

作为网页设计师，我们必须为文章的每个小标题和段落都预留一定的余量(在CSS通常使用margin)，但一个段落里所包含的元素（HTML标签）并不是一成不变的，这意味着你必须为这些可能存在的元素都设置一个明确的样式，避免产生多余的代码。

在逐步向W3C的标准过渡的前提下，目前设置段落间距的方法主要有两种：

通过类（Class）

为段落的第一个元素指定一个Class值，赋予margin-top:0。

HTML:

<div id="articles">
<h1 class="first">Heading</h1>
<p>Welcome to Bolo's blog...</p>
</div>

CSS:

1	.first { margin-top: 0; }

这种方法的缺点是：引入了一个新的Class，这意味着它会降低我们的效率。你可能需要修改以前写下的文章，而且也不利于文章内容的增减。

通过CSS伪类

CSS伪类已经逐渐被一些先进的浏览器支持。

HTML：

<div id="articles">
<h1>Heading</h1>
<p>Welcome to Bolo's blog...</p>
</div>

CSS：

1	#articles > :first-child { margin-top: 0; }

通过CSS伪类把margin-top:0赋予#articles的第一个子元素。这个方法不需要我们手动地引入一个多余的Class，因此你无需再去调整文章的代码。适应性非常强。

这种方法在CSS2标准里已经被承认，但一直得不到普及，原因就是IE6不支持（因此消灭IE6是所有Web Developer共同的责任—译者注）。

你写的CSS对IE兼容吗？

此处开始是精华啊—译者注

以上的内容只是对当前CSS可以实现的部分功能的简述，如何发挥CSS的威力靠的是网页设计师的使用方法。下面将介绍几个强大的工具，可是很方便地对IE浏览器进行最真实的兼容性测试，让你选择最好的CSS编写方案。

ie7-js

ie7-js是一个JavaScript库，它会使IE表现得像一个兼容W3C标准的浏览器，你可以在这个测试页查看某个版本的IE对这种CSS语法的兼容性，以及它们的兼容写法。

在“IE7 – js”项目有两个主要的JavaScript脚本：IE7.js和IE8.js。当你决定使用IE8-js时就不需要同时使用IE7-js，因为IE8-js已经包含了IE7-js的所有功能。你可以在这个页面找到所有关于这个项目的说明。

ie-css3.js

IE-css3.js可是令IE提供对CSS3规则的支持。但美中不足的是这个脚本并不可以令IE完全支持CSS3，而只能作为对IE的CSS引擎的扩展。毕竟CSS3还是一个未完成的标准。

eCSStender

这应该是目前最强大的JavaScript写的IE扩展了，它整合了上述两个扩展的一些突出功能，并添加了一些额外的支持。你可以在这个页面查看关于这个库的详细说明。

Bolo的看法

无论消灭IE6呼声多么高，最好的办法还是尽量去兼容它，这才不至于令自己损失读者。因此在写浏览器端的代码时，都应该优先采用兼容性强的方法。实在不行了再去写hack吧。

对于本文推荐的几个JavaScript库，如果真的用在线上的网站的话，其缺点是非常致命的（浏览器禁用了JavaScript的情况下），而且容易引起其他的不兼容（主要是和其他JavaScript脚本冲突）。因此，我推荐大家用这些库来了解IE的性能，这才是一劳永逸的做法。

本文译自：Hacking ‘paragraph spacing’ with CSS (despite IE)。内容有删改。

动态调整图片尺寸

bolo — Sun, 22 Nov 2009 10:23:19 +0000

在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。
我前段时间写的一篇文章就遇到过这种事情，后来用CSS的overflow和max-width属性暂时解决了页面变形的问题。这种方法好处是简单，但坏处是会破坏某些细节的效果。
如overflow：hidden，意思是当内部元素宽度大于父框架时隐藏超出宽度的部分。这样做可能会是一些内容突然截断，被隐藏了，很对不起观众。
通过max-width属性限制文章插图最大宽度的话，需要考虑各浏览器的兼容性。IE6是不支持这个属性的，在我印象中，一些浏览器虽然支持这个属性，但图片不是等比缩放的（好像是Safari和Opera，记不清了），这样做的话对这些浏览器的用户很不公平。
因此，我最终选择的是通过JavaScript动态改变图片尺寸。这种方法对各种浏览器兼容性良好（现在应该很少人会禁用JavaScript吧？），如果换主题的话，也可以灵活地改变文章插图的最大尺寸。
方案有两个，由于我使用的主题是加载了jQuery库的，因此可以用以下代码实现：

$(document).ready(function() {
    $('.post img').each(function() {
    var maxWidth = 100; // 图片最大宽度
    var maxHeight = 100;    // 图片最大高度
    var ratio = 0;  // 缩放比例
    var width = $(this).width();    // 图片实际宽度
    var height = $(this).height();  // 图片实际高度
 
    // 检查图片是否超宽
    if(width > maxWidth){
        ratio = maxWidth / width;   // 计算缩放比例
        $(this).css("width", maxWidth); // 设定实际显示宽度
        height = height * ratio;    // 计算等比例缩放后的高度 
        $(this).css("height", height * ratio);  // 设定等比例缩放后的高度
    }
 
    // 检查图片是否超高
    if(height > maxHeight){
        ratio = maxHeight / height; // 计算缩放比例
        $(this).css("height", maxHeight);   // 设定实际显示高度
        width = width * ratio;    // 计算等比例缩放后的高度
        $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
    }
});
});

如果不想加载jQuery库，可以用以下代码：

function ResizeImage(image, 插图最大宽度, 插图最大高度)
{
    if (image.className == "Thumbnail")
    {
        w = image.width;
        h = image.height;
 
        if( w == 0 || h == 0 )
        {
            image.width = maxwidth;
            image.height = maxheight;
        }
        else if (w > h)
        {
            if (w > maxwidth) image.width = maxwidth;
        }
        else
        {
            if (h > maxheight) image.height = maxheight;
        }
 
        image.className = "ScaledThumbnail";
    }
}

采用纯JavaScript的话，麻烦点，需要手动为图片加上class=”Thumbnail”，但最终效果是一样的。

Bolo的博客 » JavaScript