Examples of differences between the browsers

Border colors

In the absence of any other styles, some browsers use different colors for the two borders.


   <p style="border-width:10px; border-style:outset">
    This is a p
   </p>
   <table style="border-width:10px; border-style:outset">
    <tr><td>This is a table</td></tr>
   </table>
   

This is a p

This is a table

Solution: specify table {border-color:...} in your normalise stylesheet.

<img> in <a>

In the absence of any other styles, some browsers draw a border around the image and others don't.


   <a href="#"><img src="../graphics/pic.png" alt=""></a>
   

Solution: specify image {border:none} in your normalise stylesheet.

Inline SVG that draws outside its boundaries

By default, IE draws the full shape; other browsers clip the shape to its bounding box.


   <svg style="width:100px; height:100px; border:1px solid">
    <path d="M70,0 l50,50 l-50,50 l-50,-50 l50,-50"/>
   </svg>
   

But if you set the overflow property explicitly, to either visible or hidden, the results will be the same in all browsers.


   <svg style="width:100px; height:100px; border:1px solid; overflow:visible">
    <path d="M70,0 l50,50 l-50,50 l-50,-50 l50,-50"/>
   </svg>