Javascript解决常见浏览器兼容问题的12种方法(2)

这是一个非常小的javascript只有一行,而且不到1kb,它允许CSS选择器。它让您可以为每个操作系统和每个浏览器写具体的CSS代码。你可以写一些JavaScript ,设置Class的名字,也就是说,内容根据当前的浏览器。

点击查看预览效果
点击下载源文件

这里有另外一个基于jQuery的非常简单的处理浏览器选择器的方法,你需要做的只是加载jQuery库文件,并添加下面的一块儿代码。

$(document).ready(function(){
$(‘html').addClass($.browser);
});

现在你可以准备你的样式,如.msie,.mozilla, .opera, .safari 或其它目标浏览器。

点击查看预览效果

5. 最小/最大 高度/宽度支持

针对CSS min-width, min-height, max-width, max-height, border-*-width, margin, 和padding 属性,这里有一些很好的jQuery修正。

5.1

这是一个为没有原声的支持min-width, max-width,min-height和max-height的地方添加支持的jQuery插件。


5.2 JSizes

这个小jQuery插件为CSS min-width, min-height, max-width, max-height, border-*-width, margin, 和padding 属性添加支持。特别是他提供一种方法来确定一个元素在那里可见。由于所有的型号的方法返回数值,所以这些也可以安全的使用在严格的DOM元素方面。

jQuery(function($) {
     var myDiv = $(‘#myDiv');

// set margin-top to 100px and margin-bottom to 10em
     myDiv.margin({top: 100, bottom: ‘10em'});

// displays the size of the top border in pixels
     alert(myDiv.border().top);

// displays true if the element is visible, false otherwise
     alert(myDiv.isVisible());

// set padding-right to 10px and margin-left to 15px using chaining
     myDiv.padding({right: 10}).margin({left: 15});
});


6. 元素垂直/水平居中

你可能之前遇到过这个问题:水平或垂直居中某个元素。垂直居中在CSS里面相当麻烦,特别是你想支持所有主流浏览器。

javascrpt-垂直居中

6.1 Center element plugin

这个插件可以使页面中的所有元素居中,垂直和水平居中采用css负margin的方法。

$(“element”).center(); //vertical and horizontal
$(“element”).center({
horizontal: false // only vertical
});

点击查看预览效果
点击下载源文件

6.2 我是怎么把一个元素垂直居中的?

在这个视频教程里, Jeffrey Jordan Way将为你展示如何使用jQuery的力量结合CSS在你的浏览器里面使一个图片垂直居中.

7. 在IE里使用Q标签

人们期望使用的Q标签而不是blockquote标签来显示引号。然而IE/Win不支持Q标签,因为这一点,大部分网站的作者选择不使用Q标签。

7.1 QinIE

当你在你的文件的头部添加这个脚本在IE浏览器里自动扫描的网页Q的标记,并正确的显示它们(包括嵌套引用) 。当(如果)IE浏览器将来支持Q标签,这个插件将会添加浏览器版本检查。

点击下载源文件

8. 增加点击目标的大小和获得更多的响应转换

javascript-js

通过把你的所有内容放到一个可点击的标签来和单调的“read more…”链接说拜拜吧。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdpgfz.html