css文本框与按钮不对齐解决方案：

文字要包含在label标签中，并设置行高，否则文字会与文本框的顶 端对齐；文本框要设置vertical-align:middle;否则文本框与button顶端对齐；button中文字垂直居中，要设置高和行高，行高要小于高。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #textfield{

            border:1px solid #000;

            height:16px;

        }

        #button{background:#FFF;

            border:1px solid #000;

            height:20px;

        }

    </style>

</head>

<body>

<form>

    <input type="text" name="textfield" id="textfield" />

    <input type="submit" name="button" id="button" value="提交"/>

</form>

</body>

</html>

　IE 的标准正常对齐，但在 Firefox 中文本域和按钮高度是错开的。

　

此时通过对 input 标记设定左浮动 (float:left)，即可兼容 Firefox，CSS 代码如下：

button的高度包含边框的高度，而文本框text则不包含边框高度。

css归纳的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. css学习归纳总结（三） 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  3. css学习归纳总结（二） 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  4. css学习归纳总结（一） 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  5. CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳（转）

    网上有很多关于IE6/7/8, Firefox, Safari, Chrome, Opera CSS Hack的文章,但我觉得太过繁杂,要不给出一张看也看不懂的CSS Hack归纳表,要不就是给出一大 ...

  6. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  7. css兼容问题与实践归纳总结

    css兼容问题与实践归纳总结 一.IE6/7 原生块元素与display:inline-block; <div style="display:inline-block;"&g ...

  8. css学习の第一四弹—代码格式简写归纳

    一.代码简写方式归纳 >>1.盒模型代码简写: 外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左 1.如果t ...

  9. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

随机推荐

  1. 高通平台点亮LCD个人总结

    点击打开链接 高通平台LCD模块大致分为两部分:KERNEL和LK.在进行点屏之前,应该认真查看LCD原理图,弄清楚LCD亮屏需要满足的条件和上电时序,同时可以跟LCD IC原厂拿到初始化代码. 首先 ...

  2. [POJ3667]Hotel（线段树，区间合并）

    题目链接:http://poj.org/problem?id=3667 题意:有一个hotel有n间房子,现在有2种操作: 1 a,check in,表示入住.需要a间连续的房子.返回尽量靠左的房间编 ...

  3. ALV详解：OO ALV

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. C# 导出数据至 CSV

    有时候将Excel的数据另存到csv文件会出现csv格式错误,以下示例实现将DataTable里面的数据直接保存到csv文件. System.Web.HttpRuntime.Cache["v ...

  5. ZOJ 3785 What day is that day?(今天是星期几？)

    Description 题目描述 It's Saturday today, what day is it after 11 + 22 + 33 + ... + NN days? 今天是星期六,11 + ...

  6. 网上搜集的jq常用代码

    1. 设置IE特有的功能:  if ($.browser.msie) { //do something... } 2. 使用jQuery来代替一个元素: $('#thatdiv').replaceWi ...

  7. Ant build ${renderscript.opt.level}问题解决方案

    问题如下: BUILD FAILEDD:\adt-bundle-windows-x86_64-20131030\sdk\tools\ant\build.xml:653: The following e ...

  8. RARP

    ARP的工作原理如下:1. 首先,每台主机都会在自己的ARP缓冲区 (ARP Cache)中建立一个 ARP列表,以表示IP地址和MAC地址的对应关系.2. 当源主机需要将一个数据包要发送到目的主机时 ...

  9. [转载] 读《UNIX网络编程 卷1：套接字联网API》

    原文: http://cstdlib.com/tech/2014/10/09/read-unix-network-programming-1/ 文章写的很清楚, 适合初学者 最近看了<UNIX网 ...

  10. Oracle一列的多行数据拼成一行显示字符

    Oracle一列的多行数据拼成一行显示字符   oracle 提供了两个函数WMSYS.WM_CONCAT 和 ListAgg函数.    www.2cto.com   先介绍:WMSYS.WM_CO ...