zoukankan      html  css  js  c++  java
  • 异变: input的背景background

    RT,昨天写一个页面的时候,给一个input加背景图的时候发现的问题。
    代码如下:
    html部分:

    <input class="text" type="text" value="" />


    css部分:

    #searchBox input.text{
      230px;
      height:20px;
      padding:5px 5px 0px;
      border:none;
      background:url(../images/skin.gif) no-repeat 0 -100px;
      font-size:14px;
    }


    效果图:


    经过测试所有浏览器都OK,然后对input进行输入溢出测试(就是输入好多好多字),就发现了这个问题,看下图,

    发现溢出测试对FF,谷歌都ok ,就是该死的IE异变了,通过测试IE6,IE7都有这样的情况(IE8偶米装)

    然后为了解决这个问题我绞尽脑浆,针对IE做了如下调整才搞定,不知道有么有更好的方法,有的话分享下呢。
    html部分修改(套了个套子):

    <span id="searchBoxTxt">
       <input class="text" type="text" value="请输入书名" />
    </span>


    css部分修改(增加了两个hack样式):

    #searchBox #searchBoxTxt{
      *230px;
      *padding:0 5px;
      *background:url(../images/skin.gif) no-repeat 0 -100px;
    }
      #searchBox input.text{
        *padding:5px 0px 0px;
        *background:none;
      }


    经过测试IE下圆满解决,因为使用的是hack法,html部分用的是span,所以对其他浏览器无伤害,
    就这样,这个问题暂时告一段落。^_^

    补充:

    其实 中间我尝试过使用background-attachment:fixed; 但是发现么作用。不知道是真的么有左右还是我使用有问题,
    如果background-attachment:fixed 能够解决的话,那上面的代码就可以省了··=.=

  • 相关阅读:
    [题解]Magic Line-计算几何(2019牛客多校第三场H题)
    [题解]Crazy Binary String-前缀和(2019牛客多校第三场B题)
    [数论]快速幂取模
    [模板]大整数乘法——累加型
    [动态规划] 最大子段和问题
    2073
    17-2-24-D
    17-1-31-C
    2032
    1992
  • 原文地址:https://www.cnblogs.com/luluping/p/1877180.html
Copyright © 2011-2022 走看看