Responsive margin positioning issue in safari

Question

I have a sort of responsive website where elements are defined as:

 a#about{
     margin-left: 10.7%;
     margin-top: 18.8%;
     position: absolute;
     width: 7.4%;
 }

This works great to maintain the aspect ratio of the element for any resolution. However in Safari everything is moved far up the screen. I have reset my styles as well. Is there a known margin positioning issue with Safari ? The reason I am not using top and left, is because the object does not scale properly in relation to the window size

EDIT:

Here is an example to illustrate the different display in browsers Safari - FF/IE/Chrome Fiddle

Answer 1

Try giving a height, sometimes when using position absolute width and height are required for the box element to use other properties like margins and paddings. I also see that this is being applied to an anchor, make the anchor a block to use the box model, display:block