12 ways JavaScript solves common browser compatibility problems _javascript tips

If you don't know why, don't worry too much, study CSS rules and view this article: use CSS to fix everything: 20 + common bugs and fixes.
If this is not the case, you can fix it with the 12 JavaScript solutions listed below, so that your Web page looks like it can cross all browsers!
In this article, we'll uncover JavaScript solutions to the 12 most common CSS problems you might encounter in developing Web applications.

1. Automatic matching height

Since we've abandoned the page layout based on the table, the visual effects of creating the same Height column or content box are a challenge.

1.1 set matching heights with jquery

This jquery plugin is the height of the "balanced" box in the same container and creates a profile grid-using simple javascript substitution for almost a usability and performance perspective: equalheights () function Determine the height of all sibling elements in a container with the container, and then set the height of the element with the highest minimum height for each element.

How to Work

Equalheights () measures the highest level of child nodes of the specified element by looping, and then sets the height of the element whose minimum height value is the highest.

Click here to preview the effect

1.2 use jquery to match column Heights

Another jquery can make the box's height equal to the plugin

$ ("#col1, #col2 ″). Equalizecols ();

Will match the heights as you think.

$ ("#col1, #col2 ″). Equalizecols (" P,p ");

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

2. IE6 PNG transparent support

PNG transparency is not supported for versions below IE6. The use of Hack,ie 5.5 and 6 is already supported, but hack is not ideal and difficult to use. Let's see what we can do to support IE6 users while providing the best transparency for most visitors to the site.

2.1 force IE6 Support Transparent

IE7 is a JavaScript library built by Dean Edwards to force MSIE (IE6,IE5) to behave like a compatible standard browser. It fixes many CSS problems and makes transparent PNG work properly under IE6 and IE5, and it also allows advanced CSS selectors.

Click to view Preview effect
Click to download source files

2.2. Improved Ifixpng

Fix the problems with IE6 and the following PNG images, both IMG tags and css background pictures. This plugin is an improvement on the original Ifixpng plug-in. Features include: images or labels with background images, and now support Background-position, which includes an absolute positioning correction for IE browsers. (bottom: -1px | | bottom:0px)

Click to view Preview effect
Click here to download the source file

3. Change class with JavaScript

This is a handy JavaScript function that can be changed from Oldclass to Newclass for any element of the current file. This is especially useful for quickly using CSS instead of coding to change 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 effect
Click to download source files

4. CSS Browser Selector

If you can just type a special selector, where you can write some JavaScript, set a class in the current browser based on the name of the tag what?

4.1 CSS Browser

This is a very small javascript with only one row, and less than 1KB, it allows CSS selectors. It allows you to write specific CSS code for each operating system and each browser. You can write JavaScript and set the class name, which means that the content is based on the current browser.

Click to view Preview effect
Click to download source files

JQuery Browser Selector

Here's another very simple way to handle a browser selector based on jquery, 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 effect

5. Min/Max height/width support

For CSS Min-width, min-height, Max-width, Max-height, border-*-width, margin, and padding attributes, here are some good jquery fixes.

5.1 Jqminmax

This is a supported jquery plugin for min-width, max-width,min-height and max-height where there is no soundtrack.

Click to view Preview effect
Click to download source files

5.2 jsizes

This small jquery plugin adds support for 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. Because all model methods return numeric 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 effect
Click to download source files

6. Element Vertical/Horizontal Center

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

6.1 Center Element Plugin

This plugin allows all elements in the page to be centered, vertically and horizontally centered using a CSS negative margin method.

$ ("element"). Center (); Vertical and horizontal
$ ("element"). Center ({
Horizontal:false//Only Vertical
});

Click to view Preview effect
Click to download source files

6.2 How do I center an element vertically?

In this video tutorial, Jeffrey Jordan way will show you how to use the power of jquery to align a picture vertically in your browser by combining it with CSS.

7. Use q tag in IE

People expect to use the Q tag instead of the blockquote tag to display quotes. However, Ie/win does not support the Q tag, because most Web site authors choose not to use the Q tag.

7.1 Qinie

When you add this script to the header of your file in IE browser automatically scan the tags of the pages Q and correctly display them (including nested references). When IE browsers support Q tags in the future, this plugin will add a browser version check.

Click to download source files

8. Increase the size of the hit target and get more response conversions

Say goodbye by putting all your content on a clickable label and a monotonous "read more ..." link.

Click to download source files

9. Lazy Loader

Lazy Loader is a jquery. It can delay loading the picture inside the page. It will not be loaded until the user browses to a picture outside the view (visible part of the page). This is exactly the opposite of what image preloading.

Click to view Preview effect
Click here to download the source file

Bgiframe

Easy to solve the problem of IE under the z-index.

Click to view Preview effect
Click here to download the source file

Iefixbuttons.

Iefixbuttons is a jquery plugin that fixes bugs for IE6 and 7 <button> tags.

Click to view Preview effect
Click here to download the source file

12. Overflow (overflow) correction

Fixed the horizontal overflow under IE. IE displays a scroll bar inside the overflow element, especially if there is only one row in the element, and the scroll bar hides the line. This plugin fixes the problem by modifying the padding.

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

English Original: Using Javascript to Fix Common Browser headaches

Chinese Translation original: fix 12 Common browser problems with JavaScript