CSS website layout display different/wrongly in IE

Problem :
Website layout display correctly on all other browsers except Internet Explorer.
Solution :
You can make your website displayed correctly on IE and all other browsers by using the css code below :
* { margin: 0; padding: 0;}
p { word-wrap: break-word; }
.clear { clear: both; }
.clear:after { content: ""; display: block; height: 0; width: 100%; }
a:active { -moz-outline-style: none; outline: none; }
:focus { -moz-outline-style: none; }

for
<li>, please use the css code below :
vertical-align: bottom;
display: inline;

---

Problem :
<div name="Apple" style="float:left;">
<span name="Banana" style="float:right;"></span>
</div>
If you write code above, the Banana will appear below Apple for IE. Banana will appear at the same line for all other browsers.
Solution :
<div>
<span name="Apple" style="float:left;"></span>
<span name="Banana" style="float:right;"></span>
</div>

---

Problem :
IE cannot display the picture but all other browsers can.
There are two possible solutions :
1 - It is because the picture is CYMK color mode, not RGB color mode. IE cannot display CYMK color mode picture. You can use picture editor to change the CYMK color mode of the picture to RGB color mode. If you are using Photoshop, you can open the picture by Photoshop, then click "Image" from top menu, then click "Mode", then click "RGB Color", then save the picture. More info at : http://ye5.blogspot.com/2010/12/ie-cannot-display-picture.html

2 - It is because the css code has syntax error. IE is case sensitive, but all other browsers are not sensitive. For example,
.mypic{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgypC5Aak2M0E3UgwoG9DdgtBB__Z1OxIcXVBZ_RDuwRrUai9FmmL7qsXUoOdDO9rBFsxNbBmKjxDyhjCL0awYzW7SIHwFAJ8_z-J8Xe-4GXz6qUDi3g0hDnURagst3_5tJe_q4NljP4tA/s1600/comm.jpg)left no-repeat; }
From the code above, we must put a spacing before the word "left".

---

line-height:18pt; is inconsistent on IE, Firefox and Chrome. How to make it consistent on all browsers?
Answer : Change pt to px or em.

---

html checkbox display different on IE and Firefox as default just the same as picture above. You can make them become the same by writing the following css codes :

input[type=checkbox]{ /** if you put input without [type=checkbox], this css will effect on your buttons and textboxes too. **/
width: 14px;
height: 14px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
}

---

Please write a comment below if you have any other case about IE display the website layout wrongly.