JavaScript solves Common Browser compatibility problems (1)

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 don't know the reason, don't worry too much. You can fix it with the 12 JavaScript solutions listed below, so that your web page looks like it can span all browsers! Related Articles: JavaScript becomes the main battlefield of browser war)

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.

◆ 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. 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

◆ 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 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.

◆ Force 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

◆ 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

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

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?

◆ CSS 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.

◆ 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