今天在写一个小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. Java 8 VM GC Tuning Guide Charter2

    第二章 Ergonomics Ergonomics is the process by which the Java Virtual Machine (JVM) and garbage collect ...

  2. Jquery-------获取网页参数

    看如下代码: function getURLParameter(name) { return decodeURI( (RegExp(name + '=' + '(.+?)(&|$)').exe ...

  3. WinForm程序界面假死，寻求完美解决方案

    故事的开端是这样的,小白是一个程序员,他确实也是一个小白,目前还在程序员发展的道路上,兢兢业业的小心求学. 有一天,小白接到一个任务,完成一个Winform程序,附加一个功能就是可以读IC卡. 小白终 ...

  4. 虚拟机备份转移后，网络启动异常，提示“SIOCSIFADDR: No such device”的解决方案

    虚拟机管理软件:Oracle VirturalBox Manager 4.0.8 虚拟机:Ubuntu Server 10.10 i386 The problem lies in the fact t ...

  5. 【UVA】【11427】玩纸牌

    数学期望 也是刘汝佳老师白书上的例题……感觉思路很神奇啊 //UVA 11427 #include<cmath> #include<cstdio> #include<cs ...

  6. 无废话网页重构系列——（7）布局(区块、栅格)、模块组件(module)

    本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4654800.html 在构建HTML主干结构后,开始编写“页面布局”和“模块组件”: 页面框架由几个主干结 ...

  7. httpsClient抓取证书

    在执行webservice的过程中,出现如下异常: javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorExcep ...

  8. CentOS下安装Redmine 2.5.2

    Redmine是用Ruby开发的基于web的项目管理软件,所以先要下载安装Ruby,再下载对 Ruby组件进行打包的 Ruby 打包系统RubyGems. 第一步:下载必要的软件 1.依赖包安装 # ...

  9. Splay树再学习

    队友最近可能在学Splay,然后让我敲下HDU1754的题,其实是很裸的一个线段树,不过用下Splay也无妨,他说他双旋超时,单旋过了,所以我就敲来看下.但是之前写的那个Splay越发的觉得不能看,所 ...

  10. CF 295A Greg and Array （两次建树，区间更新，单点查询）

    #include <iostream> #include <stdio.h> #include <string.h> #include <algorithm& ...