1.使用注释符号
1 <div><span class="1">1</span></div><!-- 2 --><div><span class="2">2</span></div><!-- 3 --><div><span class="3">3</span></div><!-- 4 --><div><span class="4">4</span></div>
楼主对代码格式比较计较，这是动标签这边相对来说楼主可以接受的方式。
2.使用font-size和letter-space
html部分
<body>
<div><span class="1">1</span></div>
<div><span class="2">2</span></div>
<div><span class="3">3</span></div>
<div><span class="4">4</span></div>
</body>
css 部分 <style> body {width: 100%;margin:0;text-align: center;font-size: 0;letter-spacing: -2px;} div{display: inline-block;width: 50%;background: lightblue;font-size: 36px;position: relative;vertical-align: middle;} div:before {content:"";display: inline-block;padding-bottom: 100%;vertical-align: middle;} div:nth-child(2),div:nth-child(3){background: pink;} span {display: inline-block;vertical-align: middle;font-size: 6em;color: #fff;} </style>
主要就是在外层body添加
font-size:0,--兼容chrome
letter-spacing:-2px,--兼容safari ,据说要根据字体大小调整，但是楼主用了88px的字体也没有问题，这个具体情况具体解决吧