左侧图片 右侧块的实现方法---解决3像素bug的一种解决方案，不用浮动用绝对定位和margin-left...

google的实现方式是：

<div class="mw">

　　<a href="/" id="mlogo">  </a>

　　<div id="tsfi" style="zoom:1"></div>

</div>

图片可以作为a标签的背景或者嵌套子a标签里面，为a标签设置绝对定位，右面搜索框为正常块，为右面的搜索框设置margin-left即可

具体如下，也可直接去看google搜索页

.mw{

　　max-width:100%;

}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi)

 

#mlogo  {

　　background-image: url(/images/logo_mobile_srp_highres_3.png);

}

#mlogo  {

　　background: url(/images/logo_mobile_srp_3.png) no-repeat;

　　background-size: 75px 26px;

　　color: transparent;

　　width: 75px;

　　height: 26px;

　　left: 9px;

　　position: absolute;

　　text-align: center;

　　top: 8px;

}

#tsfi  {

　　margin-left: 102px;

　　-webkit-transition: all .15s;

}

转载于:https://www.cnblogs.com/mabelstyle/p/3750341.html