我想在输入的右边放置一个图标,使其变得像组合。我必须使用相对位置,因为它必须是完整的代码。我将编写一个jQuery插件,并在各处使用它。
这是我的代码。 Firefox和Chrome可以正确显示它,但IE-9有问题。如果我执行图标的margin-top -15px
,则该按钮会移至底部,如果我执行-16px,则该按钮将移至输入顶部。
我怎么解决这个问题?
<!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>
最佳答案
为什么不使用top:-value;
我认为这对您有用
如果您想使用margin-top
仅用于ie9margin-top/*\**/:-16px\9;
以及您提供的其他浏览器。
可能会对您有帮助。
关于css - IE中的上边距-15px使图标移至底部,而-16px使其移至顶部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10296622/