• 异变: 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 能够解决的话,那上面的代码就可以省了··=.=

  • 相关阅读:
    android 入门-ID
    Win10 VS2015 社区版切换到VS2013社区版 进行维护之前的项目
    Win10 AppBar
    Win10 保存Element到相册
    LRUCache c#
    Winform解决界面重绘闪烁的问题
    使用Emit实现给实体赋值
    Winform 自定义窗体皮肤组件
    WPF 分享一种背景动画效果
    使用MEF与Castle实现AOP
  • 原文地址:https://www.cnblogs.com/luluping/p/1877180.html
Copyright © 2020-2023  润新知