我很难弄清楚为什么某些内联块只能在Safari的宽屏显示器上偏离直线。有些上升，有些下降。在此fiddle中，您可以看到。我已经尝试过更改大小，但它会不断推动某些盒子类的发展。任何帮助将不胜感激，在此先感谢您。
body{
background-color:grey;
}
.outer {
text-align:center;
}
.box {
display: inline-block;
color: white;
font-family: 'Courier New';
background-color: skyblue;
width: 250px;
height: 270px;
margin: 10px;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out, transform .2s;
}
.box:hover {
background-color: #4aa8ea;
}
.zoom {
width: 50%;
height: 50%;
transition: transform 2s, filter 2s;
margin: 10px;
}
.box:hover .zoom {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari 3-8 */
transform: scale(1.1);
}
.centerImg {
margin-left: auto;
margin-right: auto;
}
.ttl {
background-color: black;
font-weight: bold;
font-family:monospace;
font-size:20px;
}
.desc {
color: black;
width: 100%;
height: 30%;
box-sizing: border-box;
word-wrap: break-word;
font-size:10px;
padding:10px;
overflow:hidden;
background-color:white;
}
.wrapper {
-webkit-column-width: 150px;
column-width: 150px;
height: 100%;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Animal Collection</h1>
<p>Get a look at all the species!</p>
<div class="outer">
<div class="box">
<img src="http://www.owlsecurity.com.mx/wp-content/uploads/2018/02/buho.png" class="zoom centerImg">
<div class="ttl">OWL</div>
<div class="desc">
<div class="wrapper"> The owl is a very fascinating species that is nocturnal. It is considered as a predator</div>
</div>
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/70/a1/58/70a1580630e2233978c0755f7215a3a2.png" class="zoom centerImg">
<div class="ttl">CAT</div>
<div class="desc"><div class="wrapper"> The cat or feline is a descendant of a lion. It can jump as high as 13 feet </div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
</body>
</html>更新
事实证明，这仅发生在Safari浏览器中。关于如何解决这个任何想法？
最佳答案
您需要为所有内联块元素设置vertical-align属性。
.box {
vertical-align: top;
}
关于html - Safari浏览器中的内联块故障，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49880393/