不同的浏览器在解析css时会有区别，主要包括两种情况：
第一，不同浏览器的css识别标签不同，例如透明度问题，不同的浏览器对透明度的样式的标签不同，
chrome + firefox + Safari ：
opacity:sqlN
其中sqlN的值域为[0, 1]
ie ：
filter:alpha(opacity=sqlN)
其中 sqlN的值域为[0, 100]
第二，浏览器的css的标签是相同的，但是解析不同，例如盒子模型的标尺不同，一种解决方案是，可以在加载页面之前判断浏览器是什么内核，针对不同的浏览器内核给body 加入不同的class，然后可以针对不同的浏览器单独给出样式。
例如： jq-chrome .cssClass{.....*****.....}
jq-ie .cssClass{-------.........---------}等
其中，判断内核加载不同class的处理：
/**
* 初始化页面css信息，为body加上基础的css比如<body class="jq-ie jq-ie8">
*/
(function($){
var ua = navigator.userAgent.toLowerCase();
var isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1),
isLinux = ua.indexOf("linux") != -1 , isChrome = ua.indexOf("chrome") > -1 , isBorderBox = $.browser.msie && !$.isStrict;
$.isStrict = document.compatMode == "CSS1Compat";
// //1.7webkit内核的都会被设置成safari
// if(isChrome){
// $.browser.chrome = true;
// $.browser.safari = null;
// delete $.browser.safari;
// //version不改了没什么意义
//// $.browser.version =
// }
var initJQCss = function() {
// find the body element
var bd = document.body || document.getElementsByTagName('body')[0];
if (!bd) {
return false;
}
var cls = [
' ',
$.browser.msie ? "jq-ie jq-ie"
+ ($.browser.version.split("\.")[0]) : $.browser.gecko ? "jq-gecko jq-gecko"
+ ($.browser.version.split("\.")[0])
: $.browser.opera ? "jq-opera" : $.browser.chrome ? "jq-chrome"
: $.browser.safari ? "jq-safari" : $.browser.mozilla ? "jq-mozilla" : "" ];
if (isMac) {
cls.push("jq-mac");
}
if (isLinux) {
cls.push("jq-linux");
}
if (isBorderBox) {
cls.push('jq-border-box');
}
if ($.isStrict) { // add to the parent to allow for selectors like
// ".jq-strict .jq-ie"
var p = bd.parentNode;
if (p) {
p.className += ' jq-strict';
}
}
bd.className += cls.join(' ');
return true;
}
if (!initJQCss()) {
$(document).ready(initJQCss);
}
})(jQuery);
相关推荐
一、CSS兼容性问题及解决方案 1. 前缀使用：为了实现一些高级特性和动画效果，如CSS3的transform、transition、animation等，不同浏览器厂商有自己的前缀，如 `-webkit-` (Chrome, Safari)、`-moz-` (Firefox)、`-...
本文将针对几种主流浏览器（如IE 6-9、Firefox、Chrome）在兼容性方面常遇到的问题进行详细解析，并提供相应的解决方案。 #### 二、IE 6-9 版本兼容问题 1. **图片路径处理问题**： - **问题描述**：在IE 6-7中，...
"IEPNGFix v2" 是一个专门针对这个问题的JavaScript库，它通过动态修改HTML元素和CSS样式，使Internet Explorer 5.5及更高版本能够正确处理PNG图片的透明度。这个脚本允许开发者在不牺牲兼容性的情况下，在老版IE...
掌握这些技巧和解决方案，能够帮助开发者更有效地处理CSS在不同浏览器间的兼容性问题，确保网站在各种环境下都能正常显示。随着浏览器更新和CSS规范的统一，这些问题逐渐减少，但了解它们仍然对维护旧项目或支持较旧...
这份文档可能还会讨论一些解决方案，如使用reset CSS来消除默认样式差异，或者使用 normalize.css 来统一浏览器的样式表现。此外，它可能还会介绍使用预处理器（如Sass或Less）和PostCSS等工具来简化CSS编写并自动...
本文将针对这些问题提供一系列解决方案，并重点介绍IE6/7与Firefox等主流浏览器下的兼容性处理方法。 #### 二、去除a链接的虚线框 在网页中，当用户使用键盘导航或访问过链接时，默认情况下链接周围会出现一个虚线...
这样，即使在不支持透明度的浏览器中，页面也能以一种可接受的方式呈现。 7. **避免IE6特有问题**：考虑到IE6的市场份额已经非常低，一些开发者可能选择不再支持。然而，如果仍需要兼容IE6，必须充分测试，确保所有...
在IE6浏览器中，由于其对CSS和图像处理的限制，图片透明度是一个常见的问题。在现代浏览器中，我们可以轻松地使用PNG格式的图片并利用CSS的`opacity`属性实现透明效果，但在IE6中，这却是一个挑战。本文将深入探讨...
### CSS多浏览器兼容性问题及解决方案 #### 一、引言 随着Web技术的发展与互联网用户的不断增长，网站设计人员面临着越来越复杂的浏览器环境。不同的浏览器（如Internet Explorer、Firefox、Chrome等）及其版本间的...
### CSS浏览器兼容性整理 #### 一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSShack兼容...以上总结涵盖了CSS在不同浏览器中的兼容性问题及解决方案。希望这些内容能帮助开发者们更好地理解和应对跨浏览器的兼容性挑战。
CSS Hack是一种特殊的技术，用于解决不同浏览器间CSS支持差异的问题。它通过利用浏览器解析CSS规则时的差异，为不同的浏览器提供特定的样式规则。主要有以下几种Hack方法： - **IE6 Hack**: 使用`width:100px!...
本文将针对常见的浏览器兼容性问题进行总结，并提供相应的解决方案。 #### 二、背景知识 1. **浏览器引擎**：现代浏览器主要分为两类引擎，一种是基于WebKit的（如Safari、Chrome早期版本），另一种是基于Gecko的...
为了解决这个问题，开发者通常会采用跨浏览器的编程技巧和库，如jQuery，它提供了大量兼容性的解决方案。 在构建弹出层登录时，我们首先要考虑的是HTML结构。一个基本的登录表单通常包含用户名和密码输入框、登录...
这个资源包提供了针对这两种浏览器的兼容性问题的详细解决方案，以及一个标准的DOM（Document Object Model）帮助文档，对前端Web程序员来说是宝贵的参考资料。 1. **IE与Firefox兼容性问题**：这两个浏览器在解析...
CSS Hack是针对不同浏览器的兼容性问题而采取的一种技巧，因为不同的浏览器对CSS的解析方式可能存在差异。"CSS_Hack速查表"是一个非常实用的工具，它汇总了各种CSS Hack，帮助开发者快速解决跨浏览器样式兼容问题。 ...
### JavaScript 滤镜及其浏览器兼容性解析 #### 一、引言 随着Web技术的发展，前端开发人员越来越追求页面的美观与互动性。...了解不同浏览器的特性和限制，以及掌握跨浏览器的解决方案，是实现高质量Web开发的关键。
### CSS常见小问题解决方案 #### 一、灰度滤镜应用 **问题描述：** 有时我们需要将页面中的图片或某个元素设置为灰度效果，这在网页设计中是一种常见的需求。 **解决方案：** 对于IE浏览器（尤其是IE8及以下版本）...
为了解决IE6下的PNG透明显示问题，开发者们找到了一种名为AlphaImageLoader的滤镜解决方案。通过JavaScript代码，可以动态地为受影响的PNG图片添加一个特殊的IE滤镜，从而实现透明效果的模拟。具体做法是，利用IE的...
- **透明度处理**：对于元素透明度的设置，IE和Firefox采用不同的方法。例如，在IE中通常使用`filter:alpha(opacity=50)`实现半透明效果，而在Firefox中则需使用`opacity: 0.5`。 - **字体渲染**：不同浏览器对字体...
IE7.js是一个专门针对Internet Explorer浏览器（特别是IE6和IE7）的兼容性解决方案，它旨在让这些旧版本的IE浏览器表现得更像现代的浏览器，如Firefox、Chrome或Safari。这个工具由Dean Edwards开发，其目标是通过...