12 methods to solve common browser compatibility problems using Javascript

If you do not know the cause and do not worry too much, study the CSS rules and read this article: Use CSS to correct everything: 20 + Common Errors and fixes.
If these are invalid, you can fix them using the 12 javascript solutions listed below, so that your web page looks like it can span all browsers!
In this article, we will unveil the javascript solution for the 12 most common CSS problems that you may encounter when developing web applications.
1. Auto-Match Height

Since we abandoned the Table-based page layout, creating visual effects for columns or content boxes of the same height is already a challenge.

1.1Use jQuery to set the matching height

This jQuery plug-in "balances" the height of the box in the same container and creates an introduction mesh-using a simple JavaScript alternative from the availability and performance perspective:EqualHeights () functionMeasure the height of all elements of the same level in a container and set the lowest height of each element to the height of the highest element.

How to work

EqualHeights () cyclically tests the child nodes at the highest level of a specified element, and then sets their minimum height to the height of the highest element.

Click here to preview the effect

1.2Match the column height with jQuery

Another plug-in of jQuery that can make the height of the box equal

$ ("# Col1, # col2"). equalizeCols ();

Match the height as you think

$ ("# Col1, # col2"). equalizeCols ("p, p ");

Match the two volumes and add a blank space after the P tag in # col1 or # col2 (short one.

2. Transparent support for IE6 PNG

Versions earlier than IE6 do not support png transparency. Hack, IE 5.5 and 6 are supported, but hack is not ideal and hard to use. Let's take a look at what we can do to support IE6 users and bring the best transparency to most visitors on the website.

2.1Force IE6 to support transparency

IE7 is a JavaScript library created by Dean Edwards to force MSIE (IE6, IE5) to behave like a compatible standard browser. It fixes many CSS problems and enables transparent PNG to work normally in IE6 and IE5, and also allows advanced CSS selectors.

Click to view preview results
Click to download the source file

2.2.Improved iFixPng

Fixed the issue of PNG images in IE6 and below. IMG labels and CSS background images can both be used. This plug-in is an improvement for the original iFixPng plug-in. Features include: images or labels with background images. Currently, background-position is supported, including the absolute positioning correction of IE browser. (Bottom:-1px | bottom: 0px)

Click to view preview results
Click here to download the source file

3. Use Javascript to change the class

This is a convenient JavaScript function. You can change the class of any element in the current file from oldClass to newClass. This is especially useful to quickly use CSS instead of encoding to change the style.

Function changeClass (oldClass, newClass ){
Var elements = document. getElementsByTagName ("*");
For (I = 0; I <elements. length; I ++ ){
If (elements [I]. className = oldClass) elements [I]. className = newClass;
}
}

Click to view preview results
Click to download the source file

4. CSS browser Selector

If you only need to type a special selector, here you can write some JavaScript and set a Class label based on the name of the current browser. What will happen?

4.1CSS Browser

This is a very small javascript with only one line and less than 1 kb. It allows CSS selectors. It allows you to write specific CSS code for each operating system and each browser. You can write some JavaScript code and set the Class name. That is to say, the content is based on the current browser.

Click to view preview results
Click to download the source file

JQuery browser Selector

Here is another very simple jQuery-based method for processing browser selectors. All you need to do is load the jQuery library file and add the following code.

$ (Document). ready (function (){
$ ('Html '). addClass ($. browser );
});

Now you can prepare your style, such as. msie,. mozilla,. opera,. safari, or other target browsers.

Click to view preview results

5. minimum/maximum height/width support

For CSS min-width, min-height, max-width, max-height, border-*-width, margin, and padding attributes, there are some good jQuery corrections.

5.1JQMinMax

This is a jQuery plug-in that supports min-width, max-width, min-height, and max-height without the original sound.

Click to view preview results
Click to download the source file

JSizes 5.2

This small jQuery plugin supports CSS min-width, min-height, max-width, max-height, border-*-width, margin, and padding attributes. In particular, he provides a way to determine where an element is visible. Since the methods of all models return numerical values, these can also be safely used in strict DOM elements.

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

Click to view preview results
Click to download the source file

6. Vertical/horizontal center of Elements

You may have encountered this problem before: to center an element horizontally or vertically. Vertical center is quite troublesome in CSS, especially if you want to support all mainstream browsers.

6.1Center element plugin

This plug-in can center all elements in the page, vertical and horizontal center using css negative margin method.

$ ("Element"). center (); // vertical and horizontal
$ ("Element"). center ({
Horizontal: false // only vertical
});

Click to view preview results
Click to download the source file

6.2How do I vertically center an element?

In this video tutorial, Jeffrey Jordan Way will show you how to align an image vertically in your browser with the power of jQuery.

7. Use the Q tag in IE

Q tags are expected to be used instead of blockquote tags to display quotation marks. However, IE/Win does not support Q tags, because most website authors choose not to use Q tags.

7.1QinIE

When you add this script in the header of your file to automatically scan web page Q tags in IE browser, and correctly display them (including nested references ). If the IE browser supports the Q tag in the future, this plug-in will add the browser version check.

Click to download the source file

8. increase the size of the click target and obtain more response transformations.

Put all your content in a clickable tag to use the monotonous "read more ..." Let's talk about the link.

Click to download the source file

9. Lazy loader

Lazy loader is a jQuery. It delays the loading of images on the page. It will not be loaded until the user browses an image outside the horizon (visible in the page. This is the opposite of image preloading.

Click to view preview results
Click here to download the source file

10. bgiframe

It is easy to solve the z-index problem in IE.

Click to view preview results
Click here to download the source file

11. ieFixButtons

IeFixButtons is a jquery plug-in that fixes the <button> label bug of IE6 and 7.

Click to view preview results
Click here to download the source file

12. overflow correction

Corrected horizontal overflow in ie. IE displays a scroll bar in the overflow element, especially if there is only one row in the element, the scroll bar will cover this line of content. This plugin fixes this issue by modifying padding.

Click to view preview results
Click here to download the source file

Original English:Using Javascript to Fix 12 Common Browser Headaches

Original Chinese Translation:Corrected 12 Common Browser problems with JAVASCRIPT