项目积累(三)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    width:218px; 
 4    height:37px;
 5    background:url(images/text.jpg) no-repeat;
 6    padding-left:5px;
 7 }
 8 .submit{
 9     border: none;
10     width: 100px;
11     height: 40px;
12     background: url(images/test-sure.jpg) no-repeat;
13     cursor: pointer;
14 }
复制代码

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

  如下展示:

  

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

  

  

posted @   木 易  阅读(635)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
点击右上角即可分享
微信分享提示