zoukankan      html  css  js  c++  java
  • 项目积累(三)CSS

      公司不是专门做网站的,偶尔会接到客户让修改前端,有时候和让头疼,自己浏览器兼容问题处理不好。

      慢慢积累吧。

      先贴出来一些前端代码吧,如下:

    1 <div class="test">
    2        <form id="Form1" runat="server">
    3                <span>请输入内容:</span>
    4                <asp:TextBox ID="txtCode" runat="server" CssClass="txt"></asp:TextBox>
    5                <asp:Button ID="btnOK" runat="server" CssClass="submit"  Text="" />
    6                <asp:Button ID="btnReset" runat="server" CssClass="submit" Text="" />
    7        </form>
    8 </div>

      按理说应该是对齐的,但是结果是:

      

      文本框和按钮没有对齐,查看页面的源码: 

    1  <span>请输入内容:</span>
    2  <input name="txtCode" type="text" id="input_code" class="txt" />
    3  <input type="submit" name="submit" value=""  id="btnOK" class="submit" />
    4  <input type="submit" name="btnReset" value="" id="btnReset" class="submit" />

      样式

     1 .txt{
     2    border:none; 
     3    218px; 
     4    height:37px;
     5    background:url(images/text.jpg) no-repeat;
     6    padding-left:5px;
     7 }
     8 .submit{
     9     border: none;
    10      100px;
    11     height: 40px;
    12     background: url(images/test-sure.jpg) no-repeat;
    13     cursor: pointer;
    14 }

      最奇葩的是,试了火狐、谷歌、IE多版本、360多版本,各个浏览器显示还不一样,考虑应该是浏览器解析的默认值问题了,应该是有个默认值设定问题,因为本人css小菜,网上找了一下,发现了是按钮的vertical-align式样,统一显示的设置为middle,搞定。

      如下展示:

      

      慢慢积累,希望自己每天成长。

      

      

  • 相关阅读:
    centos7安装puppet详细教程(简单易懂,小白也可以看懂的教程)
    centos7.3下安装nginx
    JS实现转动随机数抽奖的特效代码
    【孤独旅者】封装一个三级联动和基于Vue的mintUI三级联动
    【孤独旅者】Vue-封装$on,$emit,$off
    数据可视化,选择Echarts还是Highcharts?
    关于redux和react-redux
    vue 封装一个插件
    vue实现点击回到顶部
    vue实现吸顶
  • 原文地址:https://www.cnblogs.com/muyixiaoguang/p/4002266.html
Copyright © 2011-2022 走看看