今天在写一个小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. Pomodairo,番茄工作法-解刨篇

    处于“信息大爆炸”的 e 时代的我们每天必定要处理很多的事情,不管是工作.学习.生活......面对这么多的纷杂的事物我们将如何应对?如何做到有条不紊的进行?高效.轻松.愉快的完成它呢?这时一款精致的 ...

  2. WebAPi性能

    提高WebAPi性能   前言 WebAPi作为接口请求的一种服务,当我们请求该服务时我们目标是需要快速获取该服务的数据响应,这种情况在大型项目中尤为常见,此时迫切需要提高WebAPi的响应机制,当然 ...

  3. Notes of the scrum meeting(10/31)

    meeting time:3:00~4:30p.m.,October 30th,2013 meeting place:绿园 attendees: 顾育豪                        ...

  4. NSStringDrawingOptions-b

    如果options参数为NSStringDrawingUsesLineFragmentOrigin,那么整个文本将以每行组成的矩形为单位计算整个文本的尺寸.(在这里有点奇怪,因为字体高度大概是13.8 ...

  5. hadoop 数据采样

    http://www.cnblogs.com/xuxm2007/archive/2012/03/04/2379143.html 原文地址如上: 关于Hadoop中的采样器 .为什么要使用采样器 在这个 ...

  6. MVC3 ModelBinder

    1.Model Binder从哪些地方获取数据(找到数据后会停止继续寻找) MVC 框架内置默认的 Model Binder 是 DefaultModelBinder 类.当 Action Invok ...

  7. Android工具包

    Eclipse + ADT +SDK,下载ADT Bundle全包含 adt-bundle-windows-x86_64-20140702 http://www.cnblogs.com/tc310/p ...

  8. texCUBE() to CubemapSampler.Sample()

    update dx9 to dx11 refers to   CUBEMAP sampler texCUBE(CubeMpaSampler,normal) maybe change to Cubema ...

  9. MATLAB——axis

    MATLAB——axis axis中文为“轴”之意,在matlab中用于控制坐标轴的范围和样式(颜色等). axis([XMIN XMAX YMIN YMAX]) 设置当前所绘图像的x轴和y轴的范围. ...

  10. java socket编程基础（转）

    一,网络编程中两个主要的问题 一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输. 在TCP/IP协议中IP层主要负责网络主机的定位,数据传输的路由,由IP地址可 ...