今天在写一个小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. Could not locate device support files.《This iPhone 5 (Model A1429) is running iOS 7.0.4 (11B554a), which may not be supported by this version of Xcode.》-b

    原因:Xcode8 不支持 iOS7 解决方法: 在“/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/De ...

  2. 编译dubbo2.5.4时遇到的问题及解决

    dubbo的官方git地址为:https://github.com/alibaba/dubbo 按照其流程进行下载及编译,遇到的问题为: 1. 执行 mvn clean install -Dmaven ...

  3. select模式

    在很多比较各种网络模型的文章中,但凡提到select模型时,都会说select受限于轮询的套接字数量,这个 数量也就是系统头文件中定义的FD_SETSIZE值(例如64).但事实上这个算不上真的限制. ...

  4. JavaScript高级---桥模式设计

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  5. 解决myeclipse每次启动注册码过期输入注册码

    每次都需要重新输入一个新的注册码,搞的很不愉快,后来发现原来是因为在[我的文档]下面有一个myeclipse的配置文件,叫.myeclipse.properties 你可以全盘搜索一下这个文件,然后改 ...

  6. 基于 Eclipse 平台的代码生成技术

    ------------------------------------------------------------------ 转自http://www.ibm.com/developerwor ...

  7. uva 11825

    刘书上例题  关于集合的动态规划 #include <cstdio> #include <cstdlib> #include <cmath> #include &l ...

  8. 为什么乱码：<meta http-equiv="content-type">前的非ANSI字符

    为什么乱码:<meta http-equiv="content-type">前的非ANSI字符 浏览器检测网页字符集的默认顺序 浏览器的网页字符集检测顺序通常是: ch ...

  9. 总结：Unity3D游戏上线后的流程回顾

    原地址:http://unity3d.9tech.cn/news/2014/0127/39748.html 首先.unity 灯光烘焙 :Unity 3d FBX模型导入.选项Model 不导入资源球 ...

  10. Root resource classes

    Overview A root resource class is the entry point into a JAX-RS implemented RESTful Web service. It ...