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. Windows 多线程知识点汇总

    一.什么叫原子性? 答:一个操作不会被分成两个时间片来执行,不会刚执行到一半,由于时间片到了,CPU就跑去执行其他线程了.在多线程环境中对一个变量进行读写时,我们需要有一种方法能够保证对一个值的操作是 ...

  2. Linux 性能监测：Network

    网络的监测是所有 Linux 子系统里面最复杂的,有太多的因素在里面,比如:延迟.阻塞.冲突.丢包等,更糟的是与 Linux 主机相连的路由器.交换机.无线信号都会影响到整体网络并且很难判断是因为 L ...

  3. Cheatsheet: 2013 09.10 ~ 09.21

    .NET Lucene.Net – Custom Synonym Analyzer Using FiddlerCore to Capture Streaming Audio Immutable col ...

  4. Entity Framework 不支持DefaultValue

    http://stackoverflow.com/questions/18506088/entityframework-not-updating-column-with-default-value Y ...

  5. R语言画图基础参数设置

    Graphical Parameters You can customize many features of your graphs (fonts, colors, axes, titles) th ...

  6. SQL函数学习（十九）：CAST()函数和CONVERT()函数

    19.CAST()函数和CONVERT()函数 CAST()函数可以将某种数据类型的表达式转化为另一种数据类型 CONVERT()函数 也 可以将指定的数据类型转换为另一种数据类型 19.1 CAST ...

  7. 线程入门之join方法

    package com.thread; /** * <join:将某线程加入进来,相当于方法调用,也叫合并某个线程> * <功能详细描述> * * @author 95Yang ...

  8. .NET/C# 使用Stopwatch测量运行时间

    Stopwatch类:http://msdn.microsoft.com/zh-cn/library/system.diagnostics.stopwatch(v=vs.100).aspx 常用属性和 ...

  9. Python基础学习笔记（十一）函数、模块与包

    参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-functions.html 3. http://www.liao ...

  10. phpcms 内容——>评论管理 中添加 打开文章链接的 功能

    需要实现的功能:在后台管理系统中的 内容 下的——>评论管理  中添加 打开文章链接的 功能 1.数据库表是 v9_comment和v9_comment_data_1. v9_comment是被 ...