- 浏览: 97507 次
- 性别:
- 来自: 宁德
最新评论
-
oudoud:
非常不错,没见收藏按钮
240多个jQuery插件 -
idning:
ding
生日悖论 -
java之渴望:
<%@ page contentType="& ...
将网页数据导出到Excel(以最简单的方式呈现) -
zhoujiabin810812:
简介明了!
黑莓(BlackBerry)是什么 -
WiseNeuron:
谢谢。标记一下
240多个jQuery插件
我们提倡尽可能使用CSS,而且我们常常能做到这一点。现代浏览器有很好的CSS支持-这无疑足够好让你使用CSS来控制布局和版面设计。但是有时候,某些网页元素在不同的浏览器会出现不同。
如果你不知道原因,不要过于担心,请研究CSS规则并查看这篇文章:使用CSS来修正一切: 20 +常见错误和修复。
如果这些也无效,您可以通过下面列出的12个javascript解决方案修复它,这样您的网页看起来就能跨越所有浏览器了!
在本文中,我们会揭开你在开发web应用是可能会遇到的12个最常见的CSS问题的javascript解决方案。
1. 自动匹配高度
自从我们抛弃了基于Table的页面布局后,创建同等高度栏目或内容盒子的视觉效果已然是一个挑战。
1.1 用jQuery设置匹配高度
这个jQuery插件在同一个容器里“平衡”盒子的高度并创造一个简介的网格——几乎从可用性和性能的角度使用简单的JavaScript替代: equalHeights()函数测定一个容器里的所有同级元素同容器的高度,然后设置每个元素的最低高度为最高的元素的高度。
如何工作
equalHeights()通过循环测定指定元素的最高级别的子节点,然后设置他们的最小高度值为最高的元素的高度。
1.2 用jQuery匹配栏目高度
jQuery的另一个可以使盒子的高度相等的插件
$(“#col1, #col2″).equalizeCols();
将如你所想的那样匹配高度
$(“#col1, #col2″).equalizeCols(“p,p”);
- 匹配这两卷,并在#col1或#col2(短的那个)里的P标签后面添加空白.
匹配这两卷,并在#col1或#col2(短的那个)里的P标签后面添加空白.
2. IE6 PNG透明支持
IE6以下的版本不支持png透明。使用hack,IE 5.5和6也已经可以支持,但hack并不理想的且难以使用。让我们来看看我们能做些什么来支持IE6用户 ,同时为网站的大多数访客带来最佳的透明效果。
2.1 强制IE6支持透明
IE7的是一个Dean Edwards建立的JavaScript库,以强迫MSIE(IE6,IE5)表现的像一个兼容标准的浏览器。它修复许多CSS问题并使透明PNG在IE6和IE5下正常工作,它还允许高级的CSS选择器。
2.2. 改良iFixPng
修正IE6及以下的PNG图片的问题,IMG标签和CSS背景图片都可以。这个插件是对原始iFixPng插件的一种改进。特点包括:图像或有背景图片的标签,现在支持background-position,其中包括IE浏览器的绝对定位的修正。(bottom: -1px || bottom: 0px)
3. 用Javascript改变class
这是一个方便的JavaScript函数,可以在当前的文件的任何元素的class由oldClass改为newClass。这是特别有用的快速的利用CSS而不是用编码改变风格。
function changeClass(oldClass, newClass) {
var elements = document.getElementsByTagName(“*”);
for( i = 0; i < elements.length; i++ ) {
if( elements[i].className == oldClass ) elements[i].className = newClass;
}
}
4. CSS浏览器选择器
如果您可以只需键入一个特殊选择器,在这里您可以写一些JavaScript ,设置一个Class在基于当前的浏览器的名字的标签会怎么样?
4.1 CSS Browser
这是一个非常小的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 jQMinMax
这是一个为没有原声的支持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里面相当麻烦,特别是你想支持所有主流浏览器。
这个插件可以使页面中的所有元素居中,垂直和水平居中采用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. 增加点击目标的大小和获得更多的响应转换
通过把你的所有内容放到一个可点击的标签来和单调的“read more…”链接说拜拜吧。
9. Lazy loader
Lazy loader 是一个jQuery。它可以延迟加载页面里面的图片. 在用户浏览视界(页面中可见部分)以外的图片之前,它将不会被加载。这和image preloading的作用正好相反.
10. bgiframe
轻松的解决IE下的z-index的问题。
11. ieFixButtons
ieFixButtons 是一个修正IE6和7的<button>标签的bug的jquery插件。
12. 溢出(overflow)修正
修正ie下的水平溢出。IE在溢出的元素里面显示一个滚动条,特别是如果元素里面只有一行,滚动条就会遮住这行内容。这个插件通过修改padding来修正这个问题。
发表评论
-
你想知道您的那个端口号被那个程序占用了吗?
2009-09-14 18:24 2568以下文章主要以80端口号为例,如果想知道其他的端口号也可以使用 ... -
在电话接入时处理音频播放
2009-08-11 00:56 989通话是手机最重要的功能,手机来电会抑制正在运行的MIDlet运 ... -
单向陷门函数
2009-08-11 00:55 2733单向陷门函数(One-way Trapdoor Functio ... -
RSA加密算法
2009-08-11 00:54 28001. 密钥的产生① 选两个 ... -
数据加密标准DES
2009-08-11 00:54 1510数据加密标准DES 数据加密算法(Data Encryp ... -
Java做一个最简单的Socket通话程序
2009-08-11 00:53 1122Java中的网络编程是一个很重要的部分,也是其编程优越性的地方 ... -
C/S模式中的远程方法调用
2009-08-11 00:52 2081摘要 基于C/S设计模式, ... -
Java加密和数字签名编程快速入门
2009-08-11 00:51 685文/jwsh1984 本文主要谈一下密码学中的加密和 ... -
Vigenere密码与Playfair密码 收
2009-08-11 00:50 4011维吉尼亚(vigenere)密码,美国南北战争期间联军广泛 ... -
java实现DES加密算法
2009-08-11 00:49 2415一、java实现DES加密算法 为了实现一对密钥对整个项目所有 ... -
DES算法理论
2009-08-11 00:48 1421DES算法理论 本世纪五 ... -
欧拉函数
2009-08-11 00:47 1615当n为1至1000的整数时的值 ... -
悖论概念
2009-08-11 00:47 803其定义可以这样表述:由一个被承认是真的命题为前提,设为B,进行 ... -
生日悖论
2009-08-11 00:45 1839生日悖论是指,如果一个房间裡有23个或23个以上的人,那么至少 ... -
TCP/IP端口基础常识大全
2009-08-11 00:44 784端口可分为3大类: 1) 公认端口(Well Known Po ... -
嵌入式处理器的基本概念
2009-08-11 00:42 1075嵌入式系统的核心部件是各种类型的嵌入式处理器,目前全世界嵌入式 ... -
嵌入式实时操作系统的现状和未来
2009-08-11 00:42 1242内容摘要:从RTOS(嵌入式实时操作系统)发展的历史、RTOS ... -
网络编程--WININET
2009-08-11 00:40 1599一个Internet客户端程序的目的是通过Interne ... -
Mod运算
2009-08-11 00:37 1716模p运算 给定一个正整数p,任意一个整数n,一定存在等式 ... -
欧拉定理 (数论)
2009-08-11 00:36 1652在数论中欧拉定理(也称费马-欧拉定理或欧拉函数定理: 若m,a ...
相关推荐
以下是12种使用JavaScript解决浏览器兼容问题的方法: 1. **自动匹配高度**:当需要在不同浏览器中保持相同高度的元素时,可以使用jQuery的`equalHeights()`函数。此插件会检测同一容器内的所有元素,并设置它们的...
本文将围绕JavaScript中的多浏览器兼容性问题,介绍23个常见的问题及其快速解决方法。 1. 表单元素的访问问题:在IE浏览器中,可以通过document.formName.item(”itemName”)或者document.formName.elements[...
以下是这12种JavaScript解决浏览器兼容问题的方法的详细说明: 1. **自动匹配高度**:在非表格布局中,创建等高列或内容框是个挑战。可以使用jQuery插件,如`equalHeights()`函数,来自动调整同一容器内元素的高度...
【W3C标准规范】是解决浏览器兼容性问题的关键。万维网联盟(W3C)作为Web技术的标准制定机构,致力于推动Web的标准化,以确保不同平台和设备上的信息能够顺畅交流。例如,HTML、CSS、JavaScript等重要技术的规范都...
本文将针对常见的浏览器兼容问题提供处理办法。 1. **浏览器模式设置**: 通过`<meta>`标签可以指定浏览器以特定的IE版本模式进行渲染,例如`<meta http-equiv="X-UA-Compatible" content="IE=8">`会让页面以IE8...
### CSS针对浏览器兼容问题的解决方法 在网页开发过程中,不同浏览器对于CSS的支持程度各不相同,这导致了页面在不同浏览器下展示效果的差异。本文将详细介绍如何解决这些兼容性问题,帮助开发者确保网站在各种...
在前端开发中,浏览器兼容问题一直是开发者面临的一大挑战。不同的浏览器对某些JavaScript语法、DOM操作以及CSS样式的支持程度不尽相同,这导致了在不同浏览器下可能出现功能差异或者页面渲染问题。以下是一些常见的...
解决浏览器兼容问题的 CSS 语法技巧大全 CSS 兼容性问题是 web 开发中常见的问题之一,如何解决浏览器之间的兼容性问题是每个 web 开发者都需要面临的问题。下面是解决浏览器兼容问题的 CSS 语法技巧大全,涵盖了 ...
总的来说,解决CSS和JavaScript的浏览器兼容问题需要开发者对各种浏览器的特性有深入理解,并善于运用工具和技巧进行调试和优化。如使用Firebug、Web Developer、DebugBar等开发工具可以帮助开发者快速定位和解决...
以下是一些常见的浏览器兼容性问题及解决方案: 1. **CSS兼容性问题** - **垂直居中问题**:在CSS中,使用`vertical-align: middle`和`line-height`可以使内容垂直居中,但需要注意的是,这种方法适用于单行文本...
以下是一些解决`div+css`浏览器兼容问题的方法: 1. **DOCTYPE声明**: 为了确保浏览器按照W3C标准解析CSS,必须在HTML文档开头添加正确的DOCTYPE声明,例如`<!DOCTYPE html>`。这将确保浏览器以标准模式渲染页面...
这种方法称为“条件注释”或“hack”,是一种解决浏览器兼容问题的常见策略。 除了`!important`之外,还有其他一些解决浏览器兼容问题的技术: 1. **使用浏览器前缀**:一些CSS3特性在早期版本的浏览器中需要特定...
本文将针对标题和描述中提到的常见浏览器兼容性问题及其解决方案进行详细阐述。 首先,浏览器的解析差异是导致兼容性问题的主要原因。每个浏览器都有自己的内核,如Internet Explorer的 Trident、Firefox的 Gecko、...
总的来说,处理innerText的浏览器兼容问题需要理解其内在的行为差异,并根据实际需求选择合适的解决方案。在编写代码时,可以结合使用innerText、textContent、innerHTML等属性,以及自定义的遍历函数,以适应不同的...
标题“浏览器兼容性常见问题解决”直指这一关键领域,而描述中提供的博客链接暗示了更深入的讨论。标签“源码”和“工具”提示了解决这些问题可能涉及到的具体技术手段。我们将探讨几个常见的浏览器兼容性问题以及...
### div+css浏览器兼容问题解决方法 在网页开发过程中,经常遇到的一个问题是不同浏览器对CSS的支持程度不一,导致页面布局出现差异。特别是在早期的Web 2.0过渡时期,如何确保网页在IE7、IE6以及Firefox等浏览器中...
### CSS浏览器兼容问题详解 #### 一、引言 随着Web技术的发展,不同的浏览器对于CSS的支持程度也有所不同,这导致了在开发过程中经常会遇到浏览器之间的兼容性问题。本文旨在总结和分享一系列关于CSS兼容性的技巧...
本篇将深入探讨如何解决浏览器兼容问题,帮助您确保网站或应用在各种主流浏览器上都能正常运行。 一、了解浏览器内核 首先,我们要明白浏览器兼容性问题的根源在于各浏览器所使用的内核不同,常见的有以下几类: 1...