My HTML and CSS Test Site |
|---|
Chrome renders <table border="#" style="color:#######"> differently than Firefox, IE, and Edge. In other engine, this will also change the color of the table border with a few quirks. Chrome doesn't change. The two talbes to the right render Identically in Chrome but not in any of the other browsers listed above.
| <table border="25" style="width: 100%; background-color: rgb(100,100,150); color: rgb(255,255,65)"> <tr> <td> STUFF </td> </tr> </table> |
| <table border="25" style="width: 100%; background-color: rgb(100,100,150)"> <tr> <td style="color: rgb(255,255,65)"> STUFF </td> </tr> </table> |
Internet Explorer and Edge cannot render partially transparent <div>s at the very least, this possibly affects more elements too. The lower <div> on the right has the same inner color as the one above it, just at 50% transparency. Chrome and Firefox handle this just fine but Edge and IE both ignore the 0.5 and treat it as if any number in that position is a zero, making it invisible.
<div style="width:90%;height:90%;background-color:rgb(0,0,0);margin:auto;color:rgb(255,255,255)">
<div style="width:90%;height:90%;background-color:rgb(255,0,150);margin:auto">
<div style="width:90%;height:90%;background-color:rgb(0,0,0);margin:auto;color:rgb(255,255,255)">
<div style="width:90%;height:90%;background-color:rgb(255,0,150,0.5);margin:auto">