html - Strange space between element with border radius and it's absolute positioned pseudo content -


i've got problem on ie10 regarding element border radius , absolute positioned pseudo content.

so, html:

<div id="parent">     <div id="border">     </div> </div> 

and css:

#parent {     width: 200px;     height: 200px;  } #border {     width: 50px;     height: 50px;     border-radius: 5px;     background: gray;     position: relative; } #border:after{     content: "";     display: block;     position: absolute;     width: 30px;     height: 50px;     background: green;     left: 100%;     top: 0; } 

rendering on chrome:

chrome

rendering on ie10:

ie10

here's jsfiddle link.

can me solve mystery?

thank you!

tested on: 3 different machines windows 7 , ie10.

i'm using ie11 (tested in ie10 well) fiddle , yes see tiny little white space on both, , rendering on ff.

change left:100% left:99.9%

ie10 left:100% , white space

ie10 left:99.9% , no white space


Comments

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

inno setup - TLabel or TNewStaticText - change .Font.Style on Focus like Cursor changes with .Cursor -