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. java中poi解析excel(兼容07版本以上及以下:.xls和.xlsx格式)

    package com.genersoft.cbms.ysbz.ExcelDr.cmd; import com.genersoft.cbms.ysbz.ExcelDr.dao.ExcelDrDao; ...

  2. python文件备份脚本

    import osimport time source = ['D:\\MyDrivers\hotfix']   #这里可以用自然字符串表示r',因为windows下的分隔符与python的有冲突,所 ...

  3. java游戏开发之基础

    © 版权声明:本文为博主原创文章,转载请注明出处 游戏图形界面开发基础 AWT:(Abstract Window Toolkit,抽象窗口工具集) AWT中包含图形界面编程的基本类库,是Java语言G ...

  4. 【Hadoop基础教程】3、Hadoop之伪分布式环境搭建(转)

    伪分布式模式即单节点集群模式,所有的守护进程都运行在同一台机器上.这种模式下增加了代码调试功能,可以查看内存.HDFS文件系统的输入/输出,以及与其他守护进程交互.以hadoop用户远程登录K-Mas ...

  5. [Material Design] 教你做一个Material风格、动画的button(MaterialButton)

    原创作品,转载请注明出处:http://blog.csdn.net/qiujuer/article/details/39831451 前段时间Android L 公布了,相信看过公布会了解过的朋友都为 ...

  6. php优化(php.ini)

    PHP优化 ------------------------------------- 尽量选择php5.4及以上的版本,里面很多优化参数已经移除了相比以前版本   1.引擎解析优化和加速 1)eac ...

  7. 《HBase in Action》 第三章节的学习总结 ---- 如何编写和运行基于HBase的MapReduce程序

    HBase之所以与Hadoop是最好的伙伴,我理解就因为两点:1.HADOOP的HDFS,为HBase提供了分布式的存储方式:2.HADOOP的MR为HBase提供的分布式的计算方法.u 其中第一点, ...

  8. linux centos apache开启gzip的方法

    开启gzip压缩的方法很简单,连接服务器并打开配置文件“httpd.conf”,找到下面这两句,去掉前面的“#”  代码如下 1 LoadModule deflate_module modules/m ...

  9. cocos2dx 3.0rc怎样创建项目

    转自官网的文档. How to Run cpp-tests on win32 In this article, I will show you how to run cpp-tests on your ...

  10. Elasticsearch5.3 学习(一):安装、Yii2.0 下载es扩展

    Elasticsearch是一个基于Lucene,提供了一个分布式多用户能力的全文搜索引擎.其他就不多说了,官方文档有详细的介绍. 我自己是在CentOS 7.0安装的 Elasticsearch 是 ...