Question

在IE7，IE8，IE9中，以下代码中的图像标签未点击打开浏览窗口：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Image label</title>

  <!-- Bootstrap CSS Toolkit styles -->

</head>

<style type="text/css">
label{
    display: inline-block;
}
label img{
    pointer-events: none;
}
</style>

<body>
  <form>
    <label for="test">
      <img src="http://anniekateshomeschoolreviews.com/wp-content/uploads/2015/05/Online-picture1-300x203.jpg">
    </label>
    <input type="file" id="test">
  </form>
</body> 
</html>

有没有办法解决这个问题。任何帮助将不胜感激。

Answer 1

http://snook.ca/archives/javascript/using_images_as 看看这个希望这会起作用

Answer 2

你可以这样做而不设置id和标签。位置相对也应该用于包装此部分。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Image label</title>

  <!-- Bootstrap CSS Toolkit styles -->

</head>

<style type="text/css">
label{
    display: inline-block;
}
label img{
    pointer-events: none;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}
  input[type="file"]{
      position: absolute;
      top: 5px;
      left: 5px;
      width: 108px;
      height: 130px;
      font-size: 100px;
      text-align: right;
      filter: alpha(opacity=0);
      opacity: 0;
      outline: none;
      background: white;
      cursor: inherit;
      display: block;
  }
</style>

<body>
  <form>
    <label>
      <img src="http://anniekateshomeschoolreviews.com/wp-content/uploads/2015/05/Online-picture1-300x203.jpg">
    </label>
    <input type="file" id="test">
  </form>
</body> 
</html>

输入文件的图像标签不可点击

2 个答案: