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. SELECT INTO FROM mysql Undeclared variable

    使用SELECT INTO FROM进行数据表和数据的复制时,会提示Error Code: 1327. Undeclared variable: 这是因为mysql 数据库不支持 SELECT INT ...

  2. 【leetcode❤python】 20. Valid Parentheses

    #-*- coding: UTF-8 -*-#利用栈的思想#如果输入的左测扩则入栈,如果输入为右侧扩,判断其是否与当前栈顶配对,如果匹配则删除这一对,否则return False#'(', ')', ...

  3. Create Hierarchical Tree To Control Records In Oracle Forms

    Download Source Code Providing an example form for creating hierarchical trees in Oracle Forms to co ...

  4. 二维数组实现checkbox的分组多选

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script language="j ...

  5. mysql启动关闭

    RedHat Linux (Fedora Core/Cent OS) 1.启动:/etc/init.d/mysqld start2.停止:/etc/init.d/mysqld stop3.重启:/et ...

  6. Servlet&jsp基础：第一部分

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

  7. objc_msgSend(): Too many arguments to function call ,expected 0,have3

    runtime 使用的时候,需要设置一下: Build Setting--> Apple LLVM 6.0 - Preprocessing--> Enable Strict Checkin ...

  8. Webbrowser控件判断网页加载完毕的简单方法 (转)

    摘自:http://blog.csdn.net/cometnet/article/details/5261192 一般情况下,当ReadyState属性变成READYSTATE_COMPLETE时,W ...

  9. kakfa源码编译打包

    kakfa项目编译: cd /home/zhaofuxin/workspace/kafka-0.8.2.1-src ./gradlew releaseTarGz 会出现如下异常: zhaofuxin@ ...

  10. Codeforces Round #198 (Div. 2)

    A.The Wall 题意:两个人粉刷墙壁,甲从粉刷标号为x,2x,3x...的小块乙粉刷标号为y,2y,3y...的小块问在某个区间内被重复粉刷的小块的个数. 分析:求出x和y的最小公倍数,然后做一 ...