zoukankan      html  css  js  c++  java
  • input框和文字对齐问题

    css样式解决!

    style="vertical-align: text-bottom;margin-bottom: 2px;"
    一、问题产生的条件
    对于14像素大小的字体是没有本篇所要探讨的单(复)选框与文字对齐的问题的。但是,对于12像素大小的文字,则就存在对齐问题了,尤其在Firefox火狐浏览器以及chrome谷歌浏览器下。

    二、解决方案
    下面我将提供五种解决方案,有三个方案没有使用任何hack,且IE6,IE7,Firefox,chrome浏览器下表现都很好的,有一种方案使用了一个IE hack,但成本较低,各个浏览器表现良好。还有一种方案,代码成本很低,但在chrome浏览器下文字稍微偏上,使用input类型选择器,或chrome hack可以解决这个问题,但是对于单复选框这类控件,代码一多反而不划算,权衡之下,不针对chrome浏览器单独处理。
    这些方案都是经过平时积累,反复试验得出的结论,其兼容性值得信赖。要使用的话就给单复选框命名一个class,该class样式为下面方案提供的css样式即可。

    1.以vertical-align:text-bottom为基础的
    css代码如下:vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;
    css代码如下:vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px9;
    结果如下图(以IE6浏览器和Firefox浏览器示例):

    2.以vertical-align:text-top为基础的
    css代码如下:height:13px; vertical-align:text-top; margin-top;

    3.以vertical-align:bottom为基础的
    css代码如下:height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;

    4.以vertical-align:top为基础的
    css代码如下:height:14px; vertical-align:top;

    5.以vertical-align:middle为基础的
    css代码如下:vertical-align:middle; margin-top:-2px; margin-bottom:1px;

    最后的说明
    *未显示在opera浏览器下测试的结果,原因一是opera市场份额奇怪的小,即使不管它也影响不大;二是减轻自己的截图,对比处理的工作量。这里就直接用文字表述在opera浏览器下的表现吧。opera是个怪胎,应该来说,它对标准的支持应该是很好的,但是14像素的文字和单选框复选框却是不对齐的,当然,12像素更不用说了。但是,在方案3和方案5下的表现却是意外的好,所以方案3和方案5是不错的方案。
    *IE8浏览器下未测试,不是不想测,而是现在手头上就一台电脑,IE8由于系统原因,测不了,抱歉。
    *以上方案不一定是最优的方法,我没有加入padding进行测试,还有其他一些属性,只要有时间,将各类组合一个一个的试验,可能会找到另外的方法。
    *Firefox浏览器和chrome浏览器下的单选框和复选框默认是由一个margin值的。其两者的值大小近乎一致,拿chrome浏览器举例。在chrome谷歌浏览器下,radio单选框的默认margin值是:margin:3px 3px 0 5px;checkbox复选框的margin值为margin:3px 3px 3px 4px;而IE浏览器下似乎没有margin值,但是对margin敏感。这是不用hack解决对齐问题的难点之一。
    *最后,说句结论性的话,方案3和方案5从兼容性,代码的利用率,css的消耗等来讲都是我非常推荐的两种方法。建议您试试!

    曾在人人网的css代码中看到使用vertialc-align:-3px解决此问题,我试过,虽然表现不能用完美形容,但确实缓解了对齐的问题,是个性价比非常高的方法。我是建议您试试的。

  • 相关阅读:
    微软企业库调用Oracle存储过程返回(1个或多个)数据集
    (转)Oracle表空间
    HTML5操作
    完美实现 ASP.NET 2.0 中的URL重写伪静态(映射) >(转载)的简介与内容
    HTML5 audio 详解
    步步为营:Asp.Net使用HttpWebRequest通知,抓取,采集(转)
    js cookie操作
    多线线程
    js with用法
    asp.net AllowSorting="true"仍然不能排序的原因
  • 原文地址:https://www.cnblogs.com/lst619247/p/8057192.html
Copyright © 2011-2022 走看看