分类：CSS

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HMTL中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

pre标签里内容自动换行的方法

今天在写wiki的时候用了pre标签，我们都知道标签可定义预格式化的文本，一个常见应用就是用来放程序的源代码。我有一段代码特别长，结果它不换行直接超出了pre外层的容器。查阅了资料发现：被包围在 pre 元素中的文本通常会保留空格和换行符，但不幸的是，当你在标签里面写代码的时候，如果你没有手动换行，它也会给你保留，而不会自动换行。

我就给pre加了一个style：

word-break: break-all;

但是它没有起到任何的作用，最后找到了一种兼容IE6，IE7, IE8, Firefox, Opera, Safari和Chrome的方法，在CSS中添加下面的代码：

pre {
white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

这样之后pre标签中的内容就自动换行了！

IE6,7下绝对定位后父级元素宽高改变？

祖辈如果有float以后，子代可能出现这种情况：IE6,7下绝对定位后父级元素宽高改变。

不清楚为什么会出现绝对定位后元素父级的宽高会改变，毕竟IE的很多bug都是无厘头的，所以笔者认为解决即可，因为IE早晚会被淘汰。

在这种情况下给父级不要默认地width:100%;或者不明确指定高度。

解决办法：给被撑高或者撑宽的元素添加明确的高度或者宽度

IE下实现HTML5 input标签的placeholder属性的jquery.placeholer.js（Tony原创）

最近站长Tony开发了一个jquery.placeholder.js插件，这是一个用来在IE10之前的IE浏览器下模拟HTML5 input标签的placeholder属性的插件，用上它只需要在input标签中写上placeholder属性即可，还实现了placeholder的内容字体颜色和IE相同的功能。值得注意的是jquery版本要求是1.3到1.8，HTML声明请遵循W3C标准。

使用方法：

引入jquery.placeholder.js，在input标签中写上placeholder属性即可。

demo在线预览地址：http://www.tonitech.com/demo/jquery.placeholder.js

jquery.placeholder.js插件的代码如下：

//@charset "utf-8";
/**
 * jquery版本要求：1.3 ~ 1.8，HTML声明请遵循W3C标准
 * 用来模拟HTML5 input标签的placeholder属性的插件
 * 兼容IE6、7、8、9浏览器
 * @author wangzhiangtony@qq.com
 * @version 1.0
 * @date 2013-4-15 11:16:59
 */
$(function($) {
    //判断浏览器是否支持placeholder属性
    function isPlaceholder() {
        var input = document.createElement('input');
        return 'placeholder' in input;
    }

    function changeToOriginalColor(self) {
        var index = $(self).index();
        var color = originalColor[$(self).index()];
        $(self).css('color', color);
    }

    if(!isPlaceholder()) {
        var texts = $(':text');
        var len = texts.length;
        var originalColor = [];
        for(var i = 0; i < len; i++) {
            var self = texts[i];
            var placeholder = $(self).attr('placeholder');
            if($(self).val() == "" && placeholder != null) {
                $(self).val(placeholder);
                originalColor[i] = $(self).css('color');
                $(self).css('color', '#666');
            }
        }
        texts.focus(function() {
            if($(this).attr('placeholder') != null && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('');
                changeToOriginalColor(this);
            }
        }).blur(function() {
            if($(this).attr('placeholder') != null && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder'));
                $(this).css('color', '#666');
            }
        });
    }
});

源码直接下载地址：[download id=”2547″]

github地址：https://github.com/tonitech/jquery.placeholder.js

用于修改图片大小并保持长宽比的jQuery插件（Tony原创）

最近站长Tony开发了一个jquery.imgresize.js插件，这是一个用来修改图片大小并保持长宽比的jQuery插件，用于用户发布文章之后查看文章，如果用户的图片超过了我们容器的宽度不至于把样式搞乱，如果没有超过容器的宽度就保持原来的大小，兼容IE6、7、8浏览器。值得注意的是jquery版本要求是1.3到1.8，HTML声明请遵循W3C标准。

使用方法：

$('img').imgresize();
$('img').imgresize({width:600});

支持多张图片同时调整大小，例如选择器的元素有多张图片，让多张图片同时调整成等于或小于width的大小。没有填写width这个参数图片将保持原来的大小。

2013年9月25日优化了原来的代码，提高了插件的兼容性。

demo地址：http://www.tonitech.com/demo/jquery.imgresize.js

jquery.imgresize.js插件的代码如下：

// @charset "utf-8";
/**
 * jquery版本要求：1.3 ~ 1.8，HTML声明请遵循W3C标准
 * 用来修改图片大小并保持长宽比的jQuery插件
 * 兼容IE6浏览器
 * @author wangzhiangtony@qq.com
 * @version 1.2
 * @date 2013-9-25 14:46:49
 */
(function($) {
    $.fn.imgresize = function(opts) {
        var defaults = {
            width : null
        };
        var options = $.extend(defaults, opts);

		if(options.width != null) {
            if($.browser.msie) {
				$('img').each(function(index, element){
                    var src = $(element).attr('src');
                    $(element).load(function() {
                        iresize(this);
                    });
                    $(element).attr('src', src + '?' + new Date().getTime());
				});
            } else {
                $('img').load(function() {
                    iresize(this);
                });
            }
        }

        function iresize(self) {
            var width = $(self).width();
            var height = $(self).height();
            if(width > options.width) {
                height = options.width * height / width;
                $(self).css('width', options.width);
                $(self).css('height', Math.round(height));
            }
        }
    };
})(jQuery);

demo下载地址：

[download id=”2545″]

Chrome浏览器12px以下字号的字体无法正常显示问题的解决方法

在工作中遇到了一个问题，在Chrome浏览器中，12px以下字号的字体显示的大小跟12px的大小是一样的，如下图：

而IE是正常的：

火狐也是正常的：

那么我们怎么来解决这个问题呢？解决方法是在样式中加入下面这句代码：

-webkit-text-size-adjust:none;

效果：

这样问题就迎刃而解了。