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');
            }
        });
    }
});

demo下载地址:

jquery.placeholder.js (854)

用于修改图片大小并保持长宽比的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下载地址:

jquery.imgresize.js (564)

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

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

chrome
而IE是正常的:
ie
火狐也是正常的:
firefox
那么我们怎么来解决这个问题呢?解决方法是在样式中加入下面这句代码:
-webkit-text-size-adjust:none;
效果:
chrome2
这样问题就迎刃而解了。