Question

我有一些看起来像这样的标记：

<div class="button">
   <span class="image"></span>
   <input type="submit" value="Test button">
</div>

CSS：

.button{
  background: url('http://img33.imageshack.us/img33/4108/leftd.png');
  width: 10px;
  display: inline-block;
  height: 15px;
}

.image{
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: url('http://img339.imageshack.us/img339/3112/arrow090.png');
  margin-left: 13px;
}

.button input{
  background: url('http://img853.imageshack.us/img853/7212/righthw.png');
  border: 0;
  display: block;
  font: 11px sans-serif;
  margin-left: 10px;
  padding-left: 23px;
  padding-right: 10px;
  color: #FFFFFF;
  width: auto;
  height: 15px;
}

提交按钮的代码由后端生成，我无法更改，但spans和divs是可编辑的，因为它们是模板的一部分。我用简单的图形做了一个简单的例子来更好地展示问题：http://jsfiddle.net/UBS3z/

div保持滑动门的左侧部分，宽约10 px。跨度包含一个放置在文本左侧的图标。最后我们有了提交按钮。

问题在于，在视觉上，它看起来很好，当用户点击左侧滑动门或图像结束的区域时，按钮不会记录任何点击。这是非常糟糕的，因为按钮的大部分是无法点击的！单击按钮即可证明这一点。如果已经注册了单击，脚本将登录到控制台。

无论如何，使用CSS可以使这些区域可点击吗？我认为使用Javascript可以解决这个问题，但我更喜欢CSS解决方案。

Answer 1

请参阅小提琴代码和演示

小提琴：http://jsfiddle.net/UBS3z/6/

演示：http://jsfiddle.net/UBS3z/6/embedded/result/

是的，你是对的，可以使用css只看你的要求的演示。

Answer 2

我最终使用了javascript解决方案。虽然Dinesh的解决方案也可以，但背景图像非常复杂，所以我需要使用图像而不是背景颜色。这是问题的根本原因。

基本上，我只是编写了一个简单的脚本来挂钩button div并点击提交表单的任何点击。

使用滑动门设置提交按钮时处理“死区”

2 个答案: