今天在写一个小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. mysql中常用的公式及个人演示

    学生,院系表 -- phpMyAdmin SQL Dump-- version 4.1.9-- http://www.phpmyadmin.net---- Host: localhost-- Gene ...

  2. Interview-Largest independent set in binary tree.

    BT(binary tree), want to find the LIS(largest independent set) of the BT. LIS: if the current node i ...

  3. OC面向对象封装

    面向对象语言的三大特性:封装.继承.多态 封装:不暴露自己类的内部的属性,提高自己的数据的安全性:就像一个接线盒一样,内部结构看不到,只有外部的接口提供给我们使用,这样既安全又美观:在代码方面就是结构 ...

  4. 【BZOJ】【1272】【BeiJingWC2008】Gate of Babylon

    组合数学+容斥原理 Orz zyf-zyf 多重集组合数0.0还带个数限制?  ——>  <组合数学>第6章  6.2带重复的组合 组合数还要模P 0.0? ——> Lucas ...

  5. WCF 之 DataContract

    在客户端与服务端之间传递的自定义数据类型,格式如下: [DataContract] public class User :IExtensibleDataObject { [DataMember] pu ...

  6. phonegap/cordova 启动页面

    启动phonegap应用时,因为phonegap还在加载一系列的东西,总会出现一段时间的黑屏.解决方法是设置一个启动页面(闪屏)来过渡,让应用的用户体验更好一些. 先讲ios版本的: 首先,你需要准备 ...

  7. 关于asp.net mvc4 在IE8下 导出excel失败的解决办法

    在使用FileResult向浏览器输出文件时(pdf,excel等),通常这样做: byte[] fileContents = Encoding.UTF8.GetBytes(sbHtml.ToStri ...

  8. linux服务器重启服务命令说明文档

    (前提是电脑上面已经安装好了ssh软件~!)输入ip,用户名,端口(默认22) 输入密码,登陆成功之后, 转入到/usr/local/tomcat/bin 目录,输入命令行: [root@yangch ...

  9. Node.js 4.0.0：灵雀云和 OneAPM 的整合测试

    关于 Node.js 4.0.0 稳定版刚刚推出,备受期待,迫不及待地想用它写点东西:此外,要把 Demo 放到 Internet 上得有一个公网 IP ,看到灵雀云挺不错的而且提供域名解析,简直业界 ...

  10. SOAP vs REST

    Both methods are used by many of the large players. It's a matter of preference. My preference is RE ...