今天在写一个小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. Linux内核分析作业二—操作系统是如何工作的

    一.实验:简单的时间片轮转多道程序内核代码运行与分析 my_start_kernel之前都是硬件初始化,它是操作系统的执行入口,每循环100000次就进行一次打印. 执行更加简单,每次时钟中断时都会调 ...

  2. 如何利用OpenCV自带的级联分类器训练程序训练分类器

    介绍 使用级联分类器工作包括两个阶段:训练和检测. 检测部分在OpenCVobjdetect 模块的文档中有介绍,在那个文档中给出了一些级联分类器的基本介绍.当前的指南描述了如何训练分类器:准备训练数 ...

  3. UVALive 4872 Underground Cables 最小生成树

    题目链接: 题目 Underground Cables Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %ll ...

  4. maven工程的如何进行代码调试

    1.maven项目的父项目右键选择:maven build    注意:       1.选择Browser workspace,让BaseDirectory变成:${***}形式.       2. ...

  5. SVN提交错误:working copy is not up-to-date解决方法

    我在项目中删了2个jar,然后SVN提交,一直提交不成功 svn在提交时报错如下图: working copy is not up-to-date svn:commit failed(details ...

  6. Enabled AWE

    sp_configure RECONFIGURE GO sp_configure RECONFIGURE GO sp_configure RECONFIGURE GO sp_configure REC ...

  7. 把eclipse"中文版"变成"英文版"

    在Eclipse.exe当前路径下,直接新建快捷方式,右键属性,添加如下参数即可 eclipse.exe -nl en

  8. linux vi修改后如何保存

    linux vi修改后如何保存 按ESC键去到命令模式,然后: :w?? 保存文件但不退出vi :w file 将修改另外保存到file中,不退出vi :w! 强制保存,不推出vi :wq 保存文件并 ...

  9. 【leetcode】Median of Two Sorted Arrays（hard）★！！

    There are two sorted arrays A and B of size m and n respectively. Find the median of the two sorted ...

  10. Javascript中的Cookie操作

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...