今天在写一个小demo的时候，发现chrome下一个很奇怪的bug。

我的代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>chrome下float bug</title>

  <style>

.clearfix{*zoom:1;}

.clearfix:after{content:"";display:block;font:0/0 a;height:0;overflow:hidden;clear:both;}

.fl{float:left;padding:10px;}

.fl{}

  </style>

</head>

<body>

  <div class="clearfix">

    <div class="fl"><input type="text" value="123456778889123456778889123456778889"></div>

  </div>

</body>

</html>

我点击输入框下面的某个地方，发现input里面的内容会被选中，效果如下：DEMO

这个bug很奇怪，解决办法有两个：

1、把外层div的float去掉。

2、把.clearfix 里面的display:block;改成table。

chrome下float元素下input选中内容bug的更多相关文章

  1. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  2. css去除chrome下select元素默认border-radius

    在mac下的chrome,对于select元素会默认有一个border-radius,当然有些情况下并不需要圆角,所以就要去掉. 比较常用的方法是: .select { -webkit-appeara ...

  3. input选中 和 select点击下拉选择获取选中选项的值

    1.input选中$('#checkBox').find('input').each(function(i){ if($(this).prop('checked')){//获取是否选中 并判断 $(t ...

  4. 下拉框——把一个select框中选中内容移到另一个select框中遇到的问题

    在使用jQuery实现把一个select框中选中内容移到另一个select框中功能时遇到了一个问题,就是点击按钮时内容可以到另一个select框中,但是到了另一个select框中的内容却很快闪退回原来 ...

  5. CSS:在IE浏览器下，元素下沉一行的解决办法

    HTML: <ul> <li><a href="">嘻嘻嘻嘻嘻嘻</a><span>2015-12-17</spa ...

  6. Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素（转）

    var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个 ...

  7. jquery层级原则器（匹配前一个元素后的下一个元素，必须是挨着的）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery层级原则器（匹配父元素下的子元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Jquery Mobile下设置radio控件选中

    问题: .html文件头部引入了: <script src="js/jquery.js"></script> <script src="js ...

随机推荐

  1. 【BZOJ 1005】[HNOI2008]明明的烦恼

    Description 自从明明学了树的结构,就对奇怪的树产生了兴趣...... 给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? Input 第一行为 ...

  2. 浅析JVM内存结构和6大区域（转）

    其实对于我们一般理解的计算机内存,它算是CPU与计算机打交道最频繁的区域,所有数据都是先经过硬盘至内存,然后由CPU再从内存中获取数据进行处理,又将数据保存到内存,通过分页或分片技术将内存中的数据再f ...

  3. Week2 Team Homework: 必应输入法的软件分析和用户需求调查

    一.选题和目标人群的确定 4月8日,微软宣布推出首款整合搜索的中文云输入法“必应Bing输入法”,其前身是“英库拼音输入法”.微软宣称,该输入法界面干净,无广告.无插件,即使是在性能相对不高的电脑上, ...

  4. Hadoop启动异常情况解决方案

    1. 启动时报WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using b ...

  5. android开发设置dialog的高宽

    这里设置为跟屏幕一样的宽度,:看代码 dlg.show(); WindowManager.LayoutParams params = dlg.getWindow().getAttributes(); ...

  6. Flv 视频格式（转）

    最近要用到flv,整理了一些flv格式的资料,供参考. flv文件主要由两部分组成:header和body. 1.header header部分记录了flv的类型.版本等信息,是flv的开头,一般都差 ...

  7. centos 虚拟机安装过程

    centos装过好几次了,也装过好几次fedora,感觉centos更灵活些,这次我装了最简洁的centos,然后通过yum命令安装了各种需要的命令和软件,编译了phpredis.redis.和php ...

  8. 虚拟机移动后重启网络时提示Device does not seem to be present

    Wmware虚拟机硬盘文件位置移动之后,重新引入到Wmware workStation中, 通过命令ifconfig...没有看到eth0..然后重启网卡 #service network resta ...

  9. EXT4.2--Ext Designer 使用

    前言: “画EXT”是一个美好的想法,如果有一款可视化工具能够只需进行拖拽而设计EXT,生成代码--那真是一件美丽的事.然而现实是,即使是为Eclipse装上EXT插件,用上idea,手写代码的提示也 ...

  10. Eclipse 中Alt+/快捷键失效的解决办法。

    1.Eclipse下进入Windows ->Preperences ->General ->keys2.把word completion的快捷键设置alt+/删掉! 3.把Conte ...