CSS Proprties and Browser compatibility
CSS Properties :
1) content
Never use content to set background image for div, instead use background-image : Example.divItem{ position: absolute; top: 12px; right: 11px; width: 40px; height: 40px; content: url(../../images/elective.png) } The above properties works fine in Chrome, but in firefox the image doesn't appear. .divItem{ position: absolute; top: 12px; right: 11px; width: 40px; height: 40px; content: url(../../images/elective.png) }
2) background-size
.divItem{ position: absolute; top: 12px; right: 11px; width: 40px; height: 40px; background-image: url(../../images/elective.png); -webkit-background-size: 100%; background-size: 100% } -webkit-background-size: is specifically for those browsers which support web kit layout rendering engine. Note : http://en.wikipedia.org/wiki/WebKit Opera supports -o-background-size: But in latest opera versions, webkit itself is sufficient
3) box-shadow
.divItem{ border: 1px solid #08c; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 3px 6px rgba(0, 0, 0, 0.25) } This doesn't works in Firefox, .divItem { border: 1px solid #08c; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 3px 6px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 3px 6px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 3px 6px rgba(0, 0, 0, 0.25) }
4) border-radius:
.divItem{ border-radius: 100px; } For Firefox and other browsers .divItem{ -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }
5) innerText :
innerText is old style of using in older version of internet explorer.
Instead of using innerText , use textContent or innerHTML, this works fine in all browsers.
User innerHTML Or contentText
Excellent article! We will be linking to this particularly great post on our site.
Keep up the good writing.