今天在写一个小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. Encog

    http://www.heatonresearch.com/encog/ https://www.mql5.com/zh/articles/252

  2. 团队项目之NABC

    Time:2013-10-22 Author:wang 一个成功的人,总是知道如何管理自己的时间,如何让自己的时间得到最充分最有效的利用.对学生一族而言,课业负担重,各种课程.各种活动.各种社团,如果 ...

  3. Useful related java API for Android

    Language_suport and Other Language-Oriented API: strings,exceptions, threads, #java.lang.* offers th ...

  4. FTP操作类（支持异步）

    public delegate void DownloadProgressChangedEventHandle(string information, long currentprogress, lo ...

  5. P1676陶陶吃苹果 - vijos

    描述 curimit知道陶陶很喜欢吃苹果.于是curimit准备在陶陶生日的时候送给他一棵苹果树. curimit准备了一棵这样的苹果树作为生日礼物:这棵苹果树有n个节点,每个节点上有c[i]个苹果, ...

  6. Java多线程——<四>让线程有返回值

    一.概述 到目前为止,我们已经能够声明并使一个线程任务运行起来了.但是遇到一个问题:现在定义的任务都没有任何返回值,那么加入我们希望一个任务运行结束后告诉我一个结果,该结果表名任务执行成功或失败,此时 ...

  7. UI框架说明

    JQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编 ...

  8. 关于C＃和ASP.NET中对App.config和Web.config文件里的[appSettings]和[connectionStrings]节点进行新增、修改、删除和读取相关的操作

    最近我做的一些项目,经常需要用到对应用程序的配置文件操作,如app.config和web.config的配置文件,特别是对配置文件中的[appSettings]和[connectionStrings] ...

  9. hdu 1796 How many integers can you find

    容斥原理!! 这题首先要去掉=0和>=n的值,然后再使用容斥原理解决 我用的是数组做的…… #include<iostream> #include<stdio.h> #i ...

  10. lintcode 中等题：Letter Combinations of a Phone Number 电话号码的字母组合

    题目 电话号码的字母组合 给一个数字字符串,每个数字代表一个字母,请返回其所有可能的字母组合. 下图的手机按键图,就表示了每个数字可以代表的字母. 样例 给定 "23" 返回 [& ...