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. jquery 获得星期几-根据当前日期判断是星期几

    jquery 获得星期几 <script type="text/javascript"> var date = "07/17/2014";    / ...

  2. Bootstrap_基本HTML模板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. van Emda Boas

    van Emda Boas维护了一个整数集合[0,Max)(无重复),其中Max必须等于2的正整数次幂.它支持以下操作:(1)插入一个数字;(2)删除一个数字:(3)询问某一个数字在不在这个集合中:( ...

  4. CSS3选择器 :nth-child(n) 详解

    CSS3 :nth-child(n): http://demo.doyoe.com/css3/nth-child(n)/ 浏览器参照基准:IE9, Firefox, Chrome, Safari, O ...

  5. head标签掉到body里的问题

    HTML最开始的标签   <!DOCTYPE html>在其之前不能有任何的内容,否则head里的内容就会掉到body里,导致譬如网站的图标icon无法更新等的功能问题

  6. shutdown命令

    其实不需要使用软件,就可以实现自动关机或重启等功能的:Windows XP的关机是由Shutdown.exe程序来控制的,位于Windows\System32文件夹中.如 果想让Windows 200 ...

  7. awk 以HWI开头，并且：相邻两行的第一个字段完全相同；

    ## 思路:以HWI开头,并且:相邻两行的第一个字段完全相同:awk 'BEGIN{ last_col_1="xxxxxx"; last_row="bbbbbbbbbbb ...

  8. 改变bootstarp图标水平方向

    我一开始是以为bootstarp已经自定义了方向的类的,但是我查阅了好久都没有看到,我这里用的是CSS3的旋转180° 1:HTML <i class="icon-thumbs-dow ...

  9. iOS - OC 数据持久化

    1.Sandbox 沙箱 iOS 为每个应用提供了独立的文件空间,一个应用只能直接访问为本应用分配的文件目录,不可以访问其他目录,每个应用自己独立的访问空间被称为该应用的沙盒.也就是说,一个应用与文件 ...

  10. iOS - UIDevice

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIDevice : NSObject @available(iOS 2.0, *) public class UI ...