CSS布局實例:隱藏input文字_DIV+CSS實例

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!
        我們來看下面的代碼,成功的實現了隱藏input 文字。但分為三種情況,我們在后面進行分析。

      代碼調試框 [www.wf0088.com]

      [ 可先修改部分代碼 再運行查看效果 ]

        我們需要非凡注重的是下面的代碼:

      示例代碼 [www.wf0088.com]
      input {
      margin:5px 0;
      width:200px;
      height:20px;
      display:block;
      overflow:hidden;
      background:#f9f9f9;
      border:1px solid orange;
      }

      我們看下面的分析:

      第一種方法

      示例代碼 [www.wf0088.com]
      input.a {
      ie:expression(bb.value="提交");
      text-indent:-200em;
      }

        在opera上有問題

      第二種方法

      示例代碼 [www.wf0088.com]
      input.b {
      padding-top:20px;
      }

        假如這個值太小了在opera上文字還是可見,所以設置大一些就沒問題了,但FF中又會出現把高度撐大的現象;

      第三種方法

      示例代碼 [www.wf0088.com]
      input.c {
      font-size:100em
      }

        這種方法應該說是兼容性最好的
        FF有點bt.在padding的時候,IE,OPEAR的高度與寬度都不變,就FF變。

      來源:無憂整理//所屬分類:DIV+CSS實例/更新時間:2007-04-24
      相關DIV+CSS實例