渲染

渲染

关注
发信
java - HTTP/1.1 500 Internal Server Error网页正常运行时获取Java
java - 如何搜索对象数组，然后在Java中更新对象的一部分？
r - 如何获得 lsmeans() 与自定义 vcov 的成对对比？
r - 了解R中Makevars文件的内容(宏，变量，〜/.R/Makevars和pkg/src/Makevars)
c++逻辑替代运算符
c# - 如何使用 c# 在 IIS 6 和 IIS 7 中启用 32 位应用程序模式
C++ 命名空间和模板
r - 如何在ioslides演示文稿的rmarkdown标题中强制换行？
asp.net - 如何使CSS和JS不随每个请求提交cookie？
asp.net-mvc - AuthorizeAttribute在Mvc 5应用程序中的Web Api Controller 上不起作用
javascript - 闭包编译器:在回调时无法确定此表达式的类型
matlab - 使用Matlab在二元图中查找凹度像素/点
python - Django'NoneType'对象在表单保存中没有属性'__getitem__'
python - Django-debug-toolbar面板保持加载状态
javascript - ng-click在编译后不起作用ng-bind-html

html - 溢出属性导致Chrome渲染错误，但在 Safari 中似乎还可以

扫码查看

我发现如果显示内联块的.mazeSpace的溢出属性设置为隐藏，那么mazeSpace和mazeRow之间将存在一些间隙，这是显示设置为阻止的父框。



为什么会这样呢？如果是BFC问题？

我已经将我的代码放到[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);
}

<html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
<style id="style-1-cropbar-clipper">/* Copyright 2014 Evernote Corporation. All rights reserved. */
.en-markup-crop-options {
    top: 18px !important;
    left: 50% !important;
    margin-left: -100px !important;
    width: 200px !important;
    border: 2px rgba(255,255,255,.38) solid !important;
    border-radius: 4px !important;
}

.en-markup-crop-options div div:first-of-type {
    margin-left: 0px !important;
}
</style></head>
<body>
<div id="page"><div class="maze"><div class="mazeRow"><div class="mazeSpace north west">&nbsp;</div><div class="mazeSpace north south">&nbsp;</div><div class="mazeSpace north south">&nbsp;</div><div class="mazeSpace north east">&nbsp;</div><div class="mazeSpace north west">&nbsp;</div><div class="mazeSpace north south">&nbsp;</div><div class="mazeSpace north south east">&nbsp;</div></div><div class="mazeRow"><div class="mazeSpace south west">&nbsp;</div><div class="mazeSpace north">&nbsp;</div><div class="mazeSpace north east">&nbsp;</div><div class="mazeSpace south west">&nbsp;</div><div class="mazeSpace east">&nbsp;</div><div class="mazeSpace north west">&nbsp;</div><div class="mazeSpace north south east">&nbsp;</div></div><div class="mazeRow"><div class="mazeSpace north west">&nbsp;</div><div class="mazeSpace south east">&nbsp;</div><div class="mazeSpace south west">&nbsp;</div><div class="mazeSpace north south east">&nbsp;</div><div class="mazeSpace west">&nbsp;</div><div class="mazeSpace south east">&nbsp;</div><div class="mazeSpace north east west">&nbsp;</div></div><div class="mazeRow"><div class="mazeSpace west">&nbsp;</div><div class="mazeSpace north south">&nbsp;</div><div class="mazeSpace north east">&nbsp;</div><div class="mazeSpace north west">&nbsp;</div><div class="mazeSpace south east">&nbsp;</div><div class="mazeSpace north west">&nbsp;</div><div class="mazeSpace east">&nbsp;</div></div><div class="mazeRow"><div class="mazeSpace south east west"><i class="start icon-screenshot"></i>&nbsp;</div><div class="mazeSpace north south west">&nbsp;</div><div class="mazeSpace south east">&nbsp;</div><div class="mazeSpace south west">&nbsp;</div><div class="mazeSpace north south">&nbsp;</div><div class="mazeSpace south east">&nbsp;</div><div class="mazeSpace south east west"><i class="end icon-remove-circle"></i>&nbsp;</div></div></div><div class="actions"><a class="btn">Turn Left</a><a class="btn">Turn Right</a><a class="btn">Place in Maze</a><i class="robot icon-user"></i></div></div>

</body></html>





）。

它似乎可以在Safari中正确渲染，而不能在chrome中渲染（版本41.0.2272.118（64位））。

最佳答案

在line height: 0类中提及.maze，它将解决您的问题



* {
    box-sizing: border-box;
}

.maze {
    border: 5px solid #292929;
    display: inline-block;
    vertical-align: top;
line-height:0;
}
.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);
}

<html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
<style id="style-1-cropbar-clipper">/* Copyright 2014 Evernote Corporation. All rights reserved. */
.en-markup-crop-options {
    top: 18px !important;
    left: 50% !important;
    margin-left: -100px !important;
    width: 200px !important;
    border: 2px rgba(255,255,255,.38) solid !important;
    border-radius: 4px !important;
}

.en-markup-crop-options div div:first-of-type {
    margin-left: 0px !important;
}
</style></head>
<body>
<div id="page"><div class="maze"><div class="mazeRow"><div class="mazeSpace north west">&nbsp;</div><div class="mazeSpace north south">&nbsp;</div><div class="mazeSpace north south">&nbsp;</div><div class="mazeSpace north east">&nbsp;</div><div class="mazeSpace north west">&nbsp;</div><div class="mazeSpace north south">&nbsp;</div><div class="mazeSpace north south east">&nbsp;</div></div><div class="mazeRow"><div class="mazeSpace south west">&nbsp;</div><div class="mazeSpace north">&nbsp;</div><div class="mazeSpace north east">&nbsp;</div><div class="mazeSpace south west">&nbsp;</div><div class="mazeSpace east">&nbsp;</div><div class="mazeSpace north west">&nbsp;</div><div class="mazeSpace north south east">&nbsp;</div></div><div class="mazeRow"><div class="mazeSpace north west">&nbsp;</div><div class="mazeSpace south east">&nbsp;</div><div class="mazeSpace south west">&nbsp;</div><div class="mazeSpace north south east">&nbsp;</div><div class="mazeSpace west">&nbsp;</div><div class="mazeSpace south east">&nbsp;</div><div class="mazeSpace north east west">&nbsp;</div></div><div class="mazeRow"><div class="mazeSpace west">&nbsp;</div><div class="mazeSpace north south">&nbsp;</div><div class="mazeSpace north east">&nbsp;</div><div class="mazeSpace north west">&nbsp;</div><div class="mazeSpace south east">&nbsp;</div><div class="mazeSpace north west">&nbsp;</div><div class="mazeSpace east">&nbsp;</div></div><div class="mazeRow"><div class="mazeSpace south east west"><i class="start icon-screenshot"></i>&nbsp;</div><div class="mazeSpace north south west">&nbsp;</div><div class="mazeSpace south east">&nbsp;</div><div class="mazeSpace south west">&nbsp;</div><div class="mazeSpace north south">&nbsp;</div><div class="mazeSpace south east">&nbsp;</div><div class="mazeSpace south east west"><i class="end icon-remove-circle"></i>&nbsp;</div></div></div><div class="actions"><a class="btn">Turn Left</a><a class="btn">Turn Right</a><a class="btn">Place in Maze</a><i class="robot icon-user"></i></div></div>

</body></html>

关于html - 溢出属性导致Chrome渲染错误，但在 Safari 中似乎还可以，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29772908/

10-12 14:20
查看更多
Powered by LMLPHP ©2025 渲染 0.028533