0

IE8 在 :before 和 background 上做的很奇怪

我使用 :before 和 background 来模拟无线电输入，代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />

  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=device-width" />

  <title>Welcome to Foundation</title>

  <script src="javascripts/modernizr.foundation.js"></script>
  <link rel="stylesheet" href="stylesheets/docs.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">        </script>
  <style>
  #aaa:before {
  width:16px;
  height:16px;
  content:"";
  display:block;
  background: transparent url('img/7.png') -2px -2px no-repeat;
  }
  #aaa.checked:before {
  background-position: -38px -2px;
  }

  </style>
</head>
<body>

<div id="aaa" onclick='$("#aaa").toggleClass("checked")'></div>

</body>
</html>

在chrome上，点击图片，效果很好，在IE8上，第一次点击图片没有效果，第二次就奇怪了。

4

0 回答 0