Solutions for different display borders of IE and Google browsers

Eg1:

<Style>

. Class2 {displau: block; Background-color: # e4f39e; width: 150px; Height: 150px; Border: 10px solid green ;}

</Style>

<Div class = "class2"> test </div>

Result:

On the left is the result of running on Google and on IE.

The display: block attribute is used on eg1. in Google, the width and height values of the display: block and border attributes are added, that is: the outer frame is 10px multiplied by 2 (10 pixels for each left and right borders) + the inner frame is 150px, and the total size is 10px multiplied by 2 + 150px = 170px, that is, the width and height are both 170px;

In IE browser, the width and height values of the display: block and border attributes overlap, and the total size is the original size. That is, the width and height are both 150px;

 

Solution:

First, change display: block to display: Table-cell.

Step 1:

<Style>

. Class2 {displau: Table-cell; Background-color: # e4f39e; width: 150px; Height: 150px; Border: 10px solid green ;}

</Style>

<Div class = "class2"> Test 2 </div>

 

Running result:

On ie on Google

On Google and IE, the height of this module is the same, both of which are 150px, but the width is different. Google's width is 170px; IE's width is 150px; so next

Step 2: Set a class in the outermost layer and then define the width.

Eg3:

<Style>

. Calss1 {width: 150px ;}

. Class2 {displau: Table-cell; Background-color: # e4f39e; width: 150px; Height: 150px; Border: 10px solid green ;}

</Style>

<Div class = "class1"> <Div class = "class2"> Test 3 </div>

GoogleBrowserOn IE browser

The two browsers are the same. The method is to declare a class. Define the Desired width. Here it is both 150px and then set it to the outermost layer. Define the width and the height.