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. SQL的四种连接

    SQL的四种连接-内连接.左外连接.右外连接.全连接   今天在看一个遗留系统的数据表的时候发现平时查找的视图是FULL OUT JOIN的,导致平时的数据记录要进行一些限制性处理,其实也可以设置视图 ...

  2. java精确除法计算,四舍五入 Java问题通用解决代码

    主要用java.math.BigDecimal工具类实现,想要了解BigDecimal类可以看java api   正式版:        public static Double divide() ...

  3. 在服务端发起一个Post请求

    1.http://www.tuling123.com/openapi/api?key=9d2ff29d44b54e55acadbf5643569584&info=? 上面这个请求在服务端发起 ...

  4. flex-direction用法解释

    语法: flex-direction:row | row-reverse | column | column-reverse 默认值:row 适用于:flex容器 继承性:无 动画性:否 计算值:指定 ...

  5. url中带有加号的处理方法

    最近项目中出现了一个问题,图片的路径正确,但是转成URL之后无法找到... 找了各种原因之后,最后注意到URL中的图片名称和本地路径名称有点不一样,如下图 1.URL图片 2.本地路径 上网查了一下发 ...

  6. Google 商店

    Google 商店地址:https://store.google.com/

  7. VM虚拟机内ubuntu无法连接到网络

    VM虚拟机内ubuntu无法连接到网络 解决:编辑网络,将网路都删除掉.又一次加入网络桥接和NAT链接. .又一次连接就可以,查看一下ip地址. 方法2: 虚拟机中新装ubuntu 编辑虚拟网络,先恢 ...

  8. Heterogeneity Wins

     Heterogeneity Wins Edward Garson THE nATuRAl EvoluTion oF CoMpuTER TECHnology has brought about im ...

  9. 【C#学习笔记】之用button使得textbox中数字的值增减

    代码段: string t = ""; t = mv.textBox2.Text; int n = int.Parse(t); n = n + 1; mv.textBox2.Tex ...

  10. rebound是facebook的开源动画库

    网址:http://www.jcodecraeer.com/a/opensource/2015/0121/2338.html 介绍: rebound是facebook的开源动画库.可以认为这个动画库是 ...