zoukankan      html  css  js  c++  java
  • input 光标在 chrome下不兼容 解决方案

    input 光标在 chrome下不兼容 解决方案 height: 52px; line-height: normal; line-height:52px9 

    .list li input[type=text] {
      304px;
     height: 52px;
     line-height: normal;
     line-height: 52px9;
     border: none;
     color: #FFFFFF;
     background: url(../images/txt-bg.png) no-repeat center;
     text-indent: 10px;
     float: left;
    }
     
    ============================
    • 去掉 inline-height 属性,但这会导致IE6/7/8浏览器中input的光标偏移到input左上方,在标准浏览器(特指Google Chrome, Firefox, Opera, Safari, IE 9+)中,如果对input设置了height,而没有设置line-height,浏览器会自动使input中的内容和光标垂直居中对齐,而且光标的高度和字的高度一样。IE8及更早版本非标准,必须将height和line-height设置为相同的值才能使input中的内容垂直居中对齐,这样修正了一个浏览器,却弄坏了更多浏览器,真是得不偿失,请看下面的完美解决方案。
    • 增加一条样式 input[type="text"]:focus{line-height: normal},这会导致IE8中input光标偏移到input左上方,IE6/7/9及更新版本正常显示。只要再加上一条CSS hack,即可解决问题,实现所有主流浏览器兼容:input[type="text"]:focus{line-height: normal; line-height: 2.4em9;},其中的2.4em就是最初设置的值。
    • Google Chrome 39已经修正了这个BUG,这才是最完美的解决方案

    ====================

    直接写在 input下  
    height: 52px; 
    line-height: normal;/*为了兼容谷歌*/
     line-height: 52px9;/*为了兼容IE8*/
     
    也可以参考 腾讯好莱坞影视的 搜索框  

     =-================

    参考:网络信息

  • 相关阅读:
    CKA考试题:[统计ready的node个数,不包含有污点的和没有调度的]
    期货-基差
    期货-套期保值
    CKA考试题:[init container]
    select 与 time.After 配合使用的问题
    kubernetes 学习资料
    [rook] rook的控制流
    k8s dev
    elastic search query & filter & query_string
    如何保持github的fork于主干同步
  • 原文地址:https://www.cnblogs.com/leshao/p/4651740.html
Copyright © 2011-2022 走看看