继我之前的 question ，我有一个代码可以在两行中显示 8 个框。该代码在 FireFox 和 Chrome 中完美运行，但在 Safari 中运行不佳!
Firefox 的输出
Safari 的输出
我不知道可能是什么原因。
Demo
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.itemClass {
width: 100%;
margin: 0 0 1em 0;
box-shadow: 0px 0px 1px 1px black;
background: white;
display: flex;
}
.boxes {
list-style: none;
display: flex;
flex-wrap: wrap;
max-width: 1900px;
width: 100%;
margin: 0 auto;
padding: 1em;
}
.boxesheader {
margin: 0 auto -35px;
max-width: 1900px;
padding: 1em 0;
width: 100%;
}
.itemClass>img {
height: 74px;
width: 120px;
margin: 0 5px 0 0;
}
.itemClass>span {
width: calc(100% - 55px);
margin-left: 2%;
}
@media ( min-width :599px) {
.itemClass {
width: 49%;
margin: 0 2% 1em 0;
}
}
@media ( min-width :599px) and (max-width:1024px) {
.itemClass:nth-child(2n + 2) {
margin: 0 0 1em 0;
}
}
@media ( min-width :1024px) {
.itemClass {
width: 24%;
margin: 0 1.3333333333% 1em 0;
}
.itemClass:nth-child(4n + 4) {
margin: 0 0 1em 0;
}
}
</style>
</head>
<body>
<ul class="boxes">
<li class="itemClass"><span class="content"> <strong>Adv1</strong> <br /> <a href="#"
>XXXXXXXXXX</a>
<p>PPPPPPPP pppppp pppppp</p>
<p>fdfgd dfg dfgd fgda fdaf adf sdfsda fdaf df dfd fdsf sdf ds.</p>
</span> <img
src="http://www.google.com/images/srpr/logo11w.png"/></li>
<li class="itemClass"><span class="content"> <strong>Adv1</strong> <br /> <a href="#"
>XXXXXXXXXX</a>
<p>PPPPPPPP pppppp pppppp</p>
<p>fdfgd dfg dfgd fgda fdaf adf sdfsda fdaf df dfd fdsf sdf ds.</p>
</span> <img
src="http://www.google.com/images/srpr/logo11w.png"/></li>
<li class="itemClass"><span class="content"> <strong>Adv1</strong> <br /> <a href="#"
>XXXXXXXXXX</a>
<p>PPPPPPPP pppppp pppppp</p>
<p>fdfgd dfg dfgd fgda fdaf adf sdfsda fdaf df dfd fdsf sdf ds.</p>
</span> <img
src="http://www.google.com/images/srpr/logo11w.png"/></li>
<li class="itemClass"><span class="content"> <strong>Adv1</strong> <br /> <a href="#"
>XXXXXXXXXX</a>
<p>PPPPPPPP pppppp pppppp</p>
<p>fdfgd dfg dfgd fgda fdaf adf sdfsda fdaf df dfd fdsf sdf ds.</p>
</span> <img
src="http://www.google.com/images/srpr/logo11w.png"/></li>
<li class="itemClass"><span class="content"> <strong>Adv1</strong> <br /> <a href="#"
>XXXXXXXXXX</a>
<p>PPPPPPPP pppppp pppppp</p>
<p>fdfgd dfg dfgd fgda fdaf adf sdfsda fdaf df dfd fdsf sdf ds.</p>
</span> <img
src="http://www.google.com/images/srpr/logo11w.png"/></li>
<li class="itemClass"><span class="content"> <strong>Adv1</strong> <br /> <a href="#"
>XXXXXXXXXX</a>
<p>PPPPPPPP pppppp pppppp</p>
<p>fdfgd dfg dfgd fgda fdaf adf sdfsda fdaf df dfd fdsf sdf ds.</p>
</span> <img
src="http://www.google.com/images/srpr/logo11w.png"/></li>
<li class="itemClass"><span class="content"> <strong>Adv1</strong> <br /> <a href="#"
>XXXXXXXXXX</a>
<p>PPPPPPPP pppppp pppppp</p>
<p>fdfgd dfg dfgd fgda fdaf adf sdfsda fdaf df dfd fdsf sdf ds.</p>
</span> <img
src="http://www.google.com/images/srpr/logo11w.png"/></li>
<li class="itemClass"><span class="content"> <strong>Adv1</strong> <br /> <a href="#"
>XXXXXXXXXX</a>
<p>PPPPPPPP pppppp pppppp</p>
<p>fdfgd dfg dfgd fgda fdaf adf sdfsda fdaf df dfd fdsf sdf ds.</p>
</span> <img
src="http://www.google.com/images/srpr/logo11w.png"/></li>
</ul>
</body>
</html>
最佳答案
使用前缀!
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
CanIUse是确认支持的好地方!
如果你能摆动它，我强烈建议你工作 AutoPrefixer进入您的工作流程!
在示例 CSS 中:
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.itemClass {
width: 100%;
margin: 0 0 1em 0;
box-shadow: 0px 0px 1px 1px black;
background: white;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.boxes {
list-style: none;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 1900px;
width: 100%;
margin: 0 auto;
padding: 1em;
}
.boxesheader {
margin: 0 auto -35px;
max-width: 1900px;
padding: 1em 0;
width: 100%;
}
.itemClass>img {
height: 74px;
width: 120px;
margin: 0 5px 0 0;
}
.itemClass>span {
width: calc(100% - 55px);
margin-left: 2%;
}
@media ( min-width :599px) {
.itemClass {
width: 49%;
margin: 0 2% 1em 0;
}
}
@media ( min-width :599px) and (max-width:1024px) {
.itemClass:nth-child(2n + 2) {
margin: 0 0 1em 0;
}
}
@media ( min-width :1024px) {
.itemClass {
width: 24%;
margin: 0 1.3333333333% 1em 0;
}
.itemClass:nth-child(4n + 4) {
margin: 0 0 1em 0;
}
}
I couldn't explain vendor prefixes any better than the answer here! So give that a read.
还有更多信息:http://shouldiprefix.com/
关于html - 我的设计在 Firefox 和 Safari 中不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31018323/