今天在写一个小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 3504】[Cqoi2014]危桥

    Description Alice和Bob居住在一个由N座岛屿组成的国家,岛屿被编号为0到N-1.某些岛屿之间有桥相连,桥上的道路是双 向的,但一次只能供一人通行.其中一些桥由于年久失修成为危桥,最多 ...

  2. DB天气app冲刺二阶段第十一天（完结）

    今天最后一天冲刺了,明天就不再冲刺了..已经把所有的技术的问题还有设计的问题都弄好了吧应该说 至少目前来说是的.因为有的实现不了的或者需要耗费时间的已经果断舍弃了,然后需要完善的也都基本完善了. 现在 ...

  3. JDBC 学习笔记（一）—— 基础知识 + 分页技术

    本文目录:  1.JDBC简介       2.使用JDBC的步骤——第一个JDBC程序       3.DriverManager ——加载数据库驱动       4.数据库URL ——标识数据库的 ...

  4. 剑指offer--面试题12

    题目:打印从1~最大的n位数 分析:知道陷阱在哪,即n很大时若用通常的int,long会溢出:想到用字符串解决,这涉及到字符转数字及反过来. 刚开始纠结于字符串怎么加1,想了片刻,觉得应该取出最后一位 ...

  5. watch your tone

    老板要求邮件注意语气... 木想到混了这么久这种事情还要老板提醒

  6. The 10th Zhejiang Provincial Collegiate Programming Contest

    Applications http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5008 string set 专场 #include& ...

  7. [转载]C#中字典集合的两种遍历

    Dictionary<string, string> dictionary = new Dictionary<string,string>(); foreach (string ...

  8. Pycharm

    1.下载pycharm-community-3.0.2.exe 2.setting: keymap scheme:快捷键方案,可选择自带的:default:或者选择eclipse的快捷方案. ide ...

  9. SUDT2177体检

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2177 题目描述 大家都知道,新生入学的前几周要 ...

  10. 【Linux高频命令专题(14)】nl

    概述 nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样,nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 ...