Overflow property cause error render in chrome but it seems all right in safari

Question

I found if the overflow property of .mazeSpace which display inline-block set to hidden, then there will be some gap between the mazeSpace and mazeRow which is its parent box that the display set to block.

Error render image

Why it happened? If it's the BFC problem?

I have put my code onto [CodePen](

* {
    box-sizing: border-box;
}

.maze {
    border: 5px solid #292929;
    display: inline-block;
    vertical-align: top;
}
.maze .mazeRow .mazeSpace {
    display: inline-block;
    border: 5px solid #F8F8F8;
    width: 2em;
    height: 2em;
    overflow: hidden;
    line-height: 2em;
    font-size: 2em;
    text-align: center;
    position: relative;
}
.maze .mazeRow .mazeSpace.north {
    border-top-color: #292929;
}
.maze .mazeRow .mazeSpace.east {
    border-right-color: #292929;
}
.maze .mazeRow .mazeSpace.south {
    border-bottom-color: #292929;
}
.maze .mazeRow .mazeSpace.west {
    border-left-color: #292929;
}
.maze .mazeRow .mazeSpace i {
    display: block;
    position: absolute;
    width: 2em;
    color: #AAA;
}
.maze .mazeRow .mazeSpace i.robot {
    color: #292929;
}

div.actions {
    margin: 0;
    padding: 2em;
    list-style: none;
    display: inline-block;
    vertical-align: top;
}
div.actions i.robot {
  display: block;
  text-align: center;
  font-size: 3em;
  margin-top: .5em;
}


div.actions .btn {
    display: block;
    margin-bottom: .5em;
}

.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 12px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
  *line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #bbbbbb;
  *border: 0;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #a2a2a2;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  color: #333333;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
}

.btn:hover {
  color: #333333;
  text-decoration: none;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
  /* Buttons in IE7 don't get borders, so darken on hover */

  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
     -moz-transition: background-position 0.1s linear;
       -o-transition: background-position 0.1s linear;
          transition: background-position 0.1s linear;
}

.btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.btn.active,
.btn:active {
  background-color: #e6e6e6;
  background-color: #d9d9d9 \9;
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}


    
    


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Turn LeftTurn RightPlace in Maze

).

It seems render right in safari but not in chrome(Version 41.0.2272.118 (64-bit)).

Overflow property cause error render in chrome but it seems all right in safari

Answers (1)

Related Questions