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;
}

左侧图片 右侧块的实现方法---解决3像素bug的一种解决方案,不用浮动用绝对定位和margin-left的更多相关文章

  1. jQuery左侧图片右侧文字滑动切换代码

    分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div cla ...

  2. bootstrap实现左侧图片右侧文字布局

    效果图 代码 通过class="media-left"来控制相对位置 <!DOCTYPE html> <html> <head lang=" ...

  3. bugfree如何修改Bug7种解决方案的标注方法

    Bug有7种解决方案的标注方法 By Design- 就是这么设计的,无效的Bug Duplicate - 这个问题别人已经发现了,重复的Bug External - 是个外部因素(比如浏览器.操作系 ...

  4. 解决TextView drawableRight左侧图片大小不可控的问题

    通过代码来修改图片的大小: Drawable rightDrawable= context.getResources().getDrawable(R.drawable.more); rightDraw ...

  5. 解决IDEA右侧maven不显示方法

    解决IDEA右侧maven不显示方法 Ctrl+shift+A --> maven--> add maven projects -->选择对应的pom.xml

  6. after及before伪元素及解决父元素塌陷的几种方法

    一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...

  7. 学习笔记:Maven构造版本号的方法解决浏览器缓存问题

    需要解决的问题 在做WEB系统开发时,为了提高性能会利用浏览器的缓存功能,其实即使不显式的申明缓存,现代的浏览器都会对静态文件(js.css.图片之类)缓存.但也正因为这个问题导致一个问题,就是资源的 ...

  8. android通过BitmapFactory.decodeFile获取图片bitmap报内存溢出的解决办法

    android通过BitmapFactory.decodeFile获取图片bitmap报内存溢出的解决办法 原方法: public static Bitmap getSmallBitmap(Strin ...

  9. 【转】简单内存泄漏检测方法 解决 Detected memory leaks! 问题

    我的环境是: XP SP2 . VS2003 最近在一个项目中,程序退出后都出现内存泄漏: Detected memory leaks! Dumping objects -> {98500} n ...

随机推荐

  1. linux常用命令(个人学习笔记)

    个人说明:学习linux也有半年左右的时间了,从一开始的只会简单的开关机,到现在的熟悉应用一些简单的命令,还是有些进步的,不过对于我这种菜鸟来说,如果不经常用,发现忘的很快.所以就把在学习过程中遇到的 ...

  2. HTTP协议断点续传

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Net;usi ...

  3. hdu 1540/POJ 2892 Tunnel Warfare 【线段树区间合并】

    Tunnel Warfare                                                             Time Limit: 4000/2000 MS ...

  4. lua学习笔记(十三)

    math库     定义在math中     所有三角函数都使用弧度     指数和对数函数     取整函数     伪随机数math.random         调用时没有参数返回0~1之间的随 ...

  5. nodejs 学习资料大全

    1.blog学习篇 http://blog.fens.me/series-nodejs/ 从零开始nodejs系列文章

  6. mac eclipse 删除不用的workspace

    file--->switch workspace---->other 点击 recent workspace--->选中删除即可

  7. excel表格系列

    MicroSoft Excel表格系列问题 1.excel表格修改默认行高 2.[Excel技巧]Excel实现部分保护技巧

  8. git学习之简介(一)

    一.前言 史上最浅显易懂的Git教程! 为什么要编写这个教程?因为我在学习Git的过程中,买过书,也在网上Google了一堆Git相关的文章和教程,但令人失望的是,这些教程不是难得令人发指,就是简单得 ...

  9. hasOwnProperty()与in操作符的区别

    hasOwnProperty()  判断属性是否是实例化(不包括原型)的属性, 存在会返回true; 否则, 返回false in  无论属性是存在实例本身中, 还是原型对象中, 存在会返回true; ...

  10. .Net中多线程类的使用和总结

    lock, Monitor, Thread, Join, BackGroundWorker.   消费者和生产者.Async 委托Invoke TypeHandle中BlockIndex. http: ...