今天在写一个小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. matlab实现共轭梯度法、多元牛顿法、broyden方法

    共轭梯度法: function [ x, r, k ] = CorGrant( x0, A, b ) x = x0; r = b - A * x0; d = r; X = ones(length(x) ...

  2. sharepoint 认证

    MCPD http://www.microsoft.com/learning/en/us/mcpd-certification.aspx#fbid=YktyKIYXeFg Exam 70-573: T ...

  3. LoadRunner 学习笔记(2)VuGen运行时设置Run-Time Setting

    定义:在Vugen中Run-Time Setting是用来设置脚本运行时所需要的相关选项

  4. eclipse不能创建java虚拟机-解决方法

    找到eclipse目录下的eclipse.ini,可以看到如下内容: -startup plugins/org.eclipse.equinox.launcher_1.1.0.v20100507.jar ...

  5. 一次失败的面试——IBM电话面试

    前几天接到IBM的电话面试了,虽然被PASS了,还是发个博记录一下吧.这大概是我第一次比较正式的面试了,虽然只是通过电话,但是还是暴露出了自己的很多问题,总结下,前事不忘,后事之师嘛.:) 一号上午接 ...

  6. axure7.0 汉化包下载

    下载地址:http://files.cnblogs.com/files/feijian/axure7.0%E4%B8%AD%E6%96%87%E8%AF%AD%E8%A8%80%E6%B1%89%E5 ...

  7. 使用函数的递归调用来解决Hanoi(汉诺)塔问题。

    #include<stdio.h> void hanoi(int n, char x, char y, char z); void move(char x, char y); int ti ...

  8. ural 1864

    题意描述不清   而且还卡精度 ~~ #include <cstdio> #include <cstring> #include <iostream> using ...

  9. MonthPicker

    可以只选择MMM-yyyy的样式,而不需要确定day. http://lucianocosta.info/jquery.mtz.monthpicker/

  10. POJ 1459 Power Network(网络最大流,dinic算法模板题)

    题意:给出n,np,nc,m,n为节点数,np为发电站数,nc为用电厂数,m为边的个数.      接下来给出m个数据(u,v)z,表示w(u,v)允许传输的最大电力为z:np个数据(u)z,表示发电 ...