<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>测试</title> <style> *{margin:0;padding:0} .div1{position:relative;width:100%;height:200px;background:rgba(0,0,0,.6);color:#000;text-align:center;font-size:24px;line-height:200px} img{vertical-align:middle} .div2{position:absolute;top:0;left:0;width:inherit;height:100px;background:rgba(0,0,0,.3)} </style> </head> <body> <div class="div1"> 等大大接山就運足一放平講XXXX <img src="images/1.jpg" height="100" alt=""> <div class="div2"></div> </div> </body> </html>
是不是因为absolute的原因啊...
和行高的基线和字体也有关系。 你再测试下字体不同情况下呢。