I am looking to add an icon to the right of the input field to create a combo effect. In order for it to work properly, I need to use position relative and write a jQuery plugin to make it reusable.
The code works fine in Firefox and Chrome, but there is an issue in IE-9. Adjusting the icon's margin-top to -15px makes it go slightly lower, while setting it to -16px moves it to the top of the input field.
How can I resolve this problem?
<!DOCTYPE HTL>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<div style="width:50%; position:relative; top:0; left:0; height:0; background-color:#ccc;">
<input class="rounded" type="text" style="width:100%;">
<img src="https://placehold.it/77" style="position:relative; z-index:2; float:right; margin-top:-16px; padding-right:5px;" />
</div>
</body>
</html>