Compatibility between two browsers in jquery Development (ie6 and chrome)

It is convenient for people who only draw conclusions:

Ie6: the absolute position of the div. when the container is full, it is different from other browsers. other browsers will be placed below, while ie6 will be placed on the right. Remember to set the left attribute.

In chrome (webkit): document. ready is triggered before the image is loaded. When there is an image operation, it is best to use window. load

Develop a simple jquery plug-in, a div, which contains an img and a div. The plug-in calls out the img title attribute and displays it on the image to hide the div inside. When you move the cursor over the image, the hidden div is displayed below the image to provide control operations.

 

 

This is the result of the mouse.

 

After testing the browser compatibility, we found that the hidden div below is not displayed under ie6. Some images are not displayed in the core webkit browser.

 

 

 

Then begin to check. The height of the two images is not set, which is probably related to this. So I wrote a new page for testing. Finally, we found that the compatibility issue in ie6 is not related to the image height and width.

This is seen in firefox.

 

 

This is shown in ie6.

 

Originally in ie6, because no left attribute is set to hide the div positioning, ie6 gets it to the edge by default. Find the first problem.

 

When chrome looked at the source code, it found that the content was all there. the developer's tool found that the div height outside the two pictures had changed to 0, so it was not displayed.

 

 

At last, we found that $ (document). ready is different when webkit is triggered from other browsers. Others are triggered only after the image is loaded and displayed, while the webkit core is before the image is loaded.

 

This is the effect in firefox.

 

This is the effect in chrome.

 

 

Therefore, you only need to change $ (document). ready to $ (window). load to solve the problem.

 

Summary:

Ie6: the absolute position of the div. when the container is full, it is different from other browsers. other browsers will be placed below, while ie6 will be placed on the right. Remember to set the left attribute.