我想在输入的右边放置一个图标,使其变得像组合。我必须使用相对位置,因为它必须是完整的代码。我将编写一个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仅用于ie9

margin-top/*\**/:-16px\9;
以及您提供的其他浏览器。

可能会对您有帮助。

关于css - IE中的上边距-15px使图标移至底部,而-16px使其移至顶部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10296622/

10-10 04:24