A compilation of methods to fix browser headaches with JavaScript [Translation] Page 1/4_javascript skills

If you don’t understand why, don’t worry, dig into the rules of CSS and take a look at Using CSS to Fix Anything: 20 Common Bugs and Fixes this article.

If The article above won't help you at all, you can use one of the 12 javascript solutions below to fix your problem and make your page look good across all browsers!

In this article , we will provide 12 javascript solutions to the most common CSS problems you encounter in web application development.

You may be interested in other CSS-related articles.

• Using CSS to Do Anything: 50 Creative Examples and Tutorials

• Using CSS to Fix Anything: 20 Common Bugs and Fixes

1. Set equal heights

Since we abandoned tables Based on the layout method, it becomes a challenge to create columns or content blocks with visually equal heights.

1.1 Use jquery to set equal heights

jQuery has a plug-in that can set the height of all box models in the same container to be equal, and can also create a very simple grid - of course, the additional performance overhead is minimal. From the perspective of usability and From a performance perspective, it would be more suitable to use a simple JavaScript instead: equalHeights() This function detects the height of all sibling node elements in the same container, and then sets the minimum height of each element to the one with the largest height value among these elements. .

How it works

equalHeights() loops through the top-level child nodes of the specified element and sets their minimum height value to the height value of the highest node.

• View Demo

1.2 Set Contour Columns Using jQuery

Another jQuery plugin to set equal heights

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

The above code sets the height of #col1, #col2 columns to be equal

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

The above code will set the equal heights of #col1 and #col2, and add elements that add extra space to the p elements under #col1 and #col2.