为什么点击后我的 div 会放大？答案

【问题标题】：Why does my div enlarge when clicked?为什么点击后我的 div 会放大？
【发布时间】：2014-07-08 01:56:28
【问题描述】：

长话短说，我正在制作一个简单的井字游戏，其中 Player1 点击他的移动，而 Player2 dblclick 为他的移动。 Clear div 只是为了清除棋盘。这很简单。我唯一的问题是，单击时，Clear Div 的高度会增加。它仍然有效，但从苦行者的角度来看并没有吸引力。怎么回事？

HTML

<table>
  <tr></tr>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
  <tr></tr>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
  <tr></tr>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
</table>
<body>
  <div id="clear">Clear</div>
</body>

CSS

table{
  margin-left:auto; 
  margin-right:auto;
  border-spacing:7px;
}
.dot{
  border-radius:50px;
  height:100px;
  width:100px;
  background-color:#A8A8A8;
}
.playerOne{
  border-radius:50px;
  height:100px;
  width:100px;
  background-color:red;
}
.playerTwo{
  border-radius:50px;
  height:100px;
  width:100px;
  background-color:blue;
}
#clear{
  border-radius:50px;
  width:300px;
  padding:10px;
  font-size:30px;
  background-color:#A8A8A8;
  text-align:center;
  margin-right:auto;
  margin-left:auto;
}
#clear:active{
  border: 2px solid black; 
}

JavaScript

$(document).ready(function(){

  $('div').click(function() {
    $(this).addClass('playerOne');
  });
  $('div').dblclick(function() {
    $(this).addClass('playerTwo');
  });


  $('#clear').click(function(){
    $('.dot').removeClass('playerOne');
  });
  $('#clear').click(function(){
    $('.dot').removeClass('playerTwo');
  });

});

【问题讨论】：

你的表应该在 body 中，并且 td 应该在 tr 中。你需要先解决这个问题。
为什么您的table 位于body 之外，而这在标准HTML 代码中是不存在的？
您应该将此代码放入jsfiddle.net，以便人们可以交互地查看它。
可能是非标准的 HTML 导致某些浏览器不兼容。它似乎在JSFiddle这里工作@

标签： javascript jquery html css

【解决方案1】：

前两行应该改为

 $('.dot').click(function() {
     $(this).addClass('playerOne');
 });
 $('.dot').dblclick(function() {
     $(this).addClass('playerTwo');
 });

您在单击时将播放器类添加到任何 div，而清除按钮是一个 div。 '.dot' 选择任何具有 'dot' 类的东西

【讨论】：

【解决方案2】：

它的高度可能会增加大约.. 2-4px？这是因为您的 active 课程添加了以下内容：

  border: 2px solid black;

要修复它，您可以将这些值添加到要动态添加边距/填充的 div 中：

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;

【讨论】：

【解决方案3】：

这个呢：jsFiddle

我修复了你的 CSS 样式。有很多多余的属性。我添加了一些属性来禁用 dblclick 上的选择。我也清理了你的 javascript 代码。

我通过向#clear 类添加透明边框来解决您的边框问题（Formic 的解决方案在我的 Chrome 上不起作用）。然后，当出现黑色边框时，大小保持不变。

#clear{
  border-radius:50px;
  width:300px;
  padding:10px;
  font-size:30px;
  background-color:#A8A8A8;
  text-align:center;
  margin-right:auto;
  margin-left:auto;
  border: 2px solid rgba(0,0,0,0); // here is the trick!
}
#clear:active{
  border: 2px solid black; 
}

【讨论】：