12 tips on using Javascript to solve browser compatibility problems (1)

This article briefly introduces 12 Javascript methods to solve common browser compatibility problems. modern browsers have good CSS support-which is definitely good enough for you to use CSS to control layout and layout design. However, some web page elements may be different in different browsers.

12 Javascript methods to solve common browser compatibility problems

We advocate the use of CSS as much as possible, and we often do this. Modern browsers have good CSS support-this is definitely good enough for you to use CSS to control layout and layout design. However, some web page elements may be different in different browsers.

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.1 Use 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: javasheights () the function is used to determine the height of all elements of the same level in a container. Then, the minimum height of each element is set 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.

1.2 match 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 IE6PNG

Versions earlier than IE6 do not support png transparency. Hack is supported by IE5.5 and 6, but it is not ideal and difficult 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.1 force IE6 to support transparency

IE7 is a JavaScript library created by DeanEdwards 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.

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)

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.

 
 

  
  
functionchangeClass(oldClass,newClass){  
  
  
varelements=document.getElementsByTagName(“*”);  
  
  
for(i=0;i<elements.length;i++){  
  
  
if(elements[i].className==oldClass)
  
  
elements[i].className=newClass;  
  
  
}  
  
  
}