`
DBear
  • 浏览: 231059 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

一个让以各种类型元素为容器的“按钮”都文字居中的方法

阅读更多

    最近在做一个Button控件,这个控件不仅限于使用<button>标签做容器,还允许使用<span><div>设置<h1>这样的标签。但是,对容器类型的大容忍度的代价就是要协调好这些容器在不同浏览器下的不同表现。下面总结下需要处理的兼容问题:

    1. <= IE7版本的浏览器,不支持box-sizing属性的设置,且,button的box-sizing展示效果是border-box,而其余类型元素的是content-box;
   

    2. border-box展示的元素,要让文字居中,要满足下面的等式 :

   

    lineHeight = height - borderTopWidth - borderBottomWidth
   

    3. IE8浏览器下,如果是纯汉字文字,即便你使用上面的方法做了居中兼容,文字也会向上飘;

 

    知道了这三点,解决它们,目标也就达成了。

 

    问题1和2: 考虑IE7的低占有率,我考虑将IE7浏览器下的表现兼容统一成其他浏览器,即如果使用<button>做容器,并设置了height(这个是包含了border的),那我会把这个height加上border的宽度,使得它的表现看起来是content-box的。

 

    问题3: 这个处理要个小窍门,既然纯汉字会飘上,那么我们就增加一个非汉字的字符,并把它隐藏起来。增加下面一段css:

 

[元素的class]:before {
    content: '.';
    visibility: hidden;
}

   

 

    现在大致的解决方向已经知道,那么,在一个height可以动态设置的环境里,怎么动态的调整这些值呢?

 

    首先,我们需要一个获取上下border尺寸的函数:

 

     function getBorderInfo(dom) {
            var borderTop;
            var borderBottom;
            // IE支持
            if (dom.currentStyle) {
                borderTop =
                    parseInt(dom.currentStyle.borderTopWidth);
                borderBottom =
                    parseInt(dom.currentStyle.borderBottomWidth);
            }
            // FF,Chrom支持
            else if (window.getComputedStyle(dom, null)) {
                var style = window.getComputedStyle(dom, null);
                borderTop =
                    Math.ceil(parseFloat(style.borderTopWidth));
                borderBottom =
                    Math.ceil(parseFloat(style.borderBottomWidth));
            }
            return {
                  borderTop: borderTop
                  borderBottom: borderBottom
            }
    }

    Tip:有一个问题需要注意一下,就是IE下有一个bug,对于非<button>的元素,在你还没有给这个元素定义height属性时,你使用currentStyle去获取border信息,得出来的结果是“medium”这种相对尺寸信息,其实这个是没有意义的。而我着实不想每次设置height的时候都去调用这么一个函数去重新计算border,所以这个函数,我只用在<button>上,并且只用一次就存起来。

    经过验证,即便是<button>,在你不设置一个height给它的时候,它返回的尺寸也是不对的,似乎是默认值,比如“2px”。所以我最后只能把它放到了设置height之后。

 

 

    接下来我要调整我们的height了。

function setHeight(dom, height) {
     dom.style.height = height+ 'px';
     var lineHeight = value;
     dom.style.lineHeight = lineHeight + 'px';

     // offsetHeight是元素包含了border和内容后的总高度
     var offsetHeight = dom.offsetHeight;
     // 说明是border-box模式
     if (offsetHeight === height) {
         // 那么我需要把它调整成content-box
         var borderInfo = getBorderInfo(dom);
         height = height
              + borderInfo.borderTop + borderInfo.borderBottom;
         dom.style.height = height + 'px';
     }
}

 

    好了,这样就行了。当然,我这里没有考虑padding(因为我没设置。。。),不过如果有这个需要,其实也就是在加加减减的时候把padding算上而已。

 

 

 

 

 

分享到:
评论

相关推荐

    FF(火狐浏览器)下解决按钮的水平居中

    首先,Firefox有一个独特的私有属性,即在某些类型的输入元素(如`&lt;input&gt;`)内,尤其是按钮相关的类型,如`type="reset"`、`type="button"`、`type="submit"`和`type="file"`,会默认添加2像素的内边距(padding)...

    div层居中代码下载

    在网页设计与开发过程中,经常需要将页面中的元素(如DIV)居中显示,以达到更好的视觉效果和用户体验。本文将详细介绍如何实现DIV的水平居中以及垂直居中,并提供具体的代码示例。 #### 二、水平居中 ##### 2.1 ...

    焦点图满屏切换 背景图居中满屏切换+自已做的项目

    这种类型的网页元素通常用于网站的首页或者产品展示区域,以吸引用户注意力并展示重要信息。 【焦点图满屏切换】焦点图,也被称为轮播图或幻灯片,是一种在有限空间内展示多张图片或内容的网页设计元素。它通过自动...

    淘宝居中全屏轮播代码

    淘宝作为一个全球知名的电商平台,其页面设计自然也不例外。本文将深入解析淘宝居中全屏轮播代码的实现原理,帮助读者理解其工作流程,并掌握如何在自己的项目中实现类似的效果。 ### 一、HTML结构分析 首先,我们...

    淡入淡出效果的居中弹窗代码.zip

    标题中的"淡入淡出效果的居中弹窗代码"指的是一个前端实现的弹窗组件,它具备淡入淡出的动画效果,并且在页面上能够自动居中显示。这个压缩包可能包含了实现这一功能的HTML、CSS和JavaScript代码文件。 居中弹窗...

    JavaSE程序设计课件:L04-GUI & Applets - 2.pdf

    这个示例创建了一个面板,并在上面放置了两个按钮“”和“=&gt;”,点击按钮可以将面板上的消息向左或向右移动。 - 示例13.2:使用复选框(CheckBoxDemo) 在ButtonDemo的基础上添加了三个复选框,用户可以选择是否...

    SWT控件知识学习笔记

    这段代码表示创建了一个复选按钮(`CHECK`),并且具有深陷型(`BORDER`)和文字左对齐(`LEFT`)的样式。 ##### 2.3 Button 组件常用方法 `Button` 组件提供了多种方法用于设置其属性和行为,包括但不限于: - *...

    android 各种Layout用到的一些重要的属性

    - **`android:layout_centerInParent`**:设置此属性为 `true` 可以使视图在其父容器中水平和垂直都居中。如果不设置或设为 `false`,则默认不居中。 - **`android:layout_alignParentBottom`**:设置此属性为 `true...

    这是一个HTML元素速查表

    - **功能**:用于创建各种类型的输入控件,如文本框、按钮等。 #### 47. `&lt;ins&gt;` - 插入元素 - **功能**:标记已插入文档中的文本。 #### 48. `&lt;isindex&gt;` - 索引输入元素(已废弃) - **功能**:提示用户输入单行...

    android布局详解

    例如,在一个`Button`中,`android:gravity="right"`可以让按钮内的文本靠右对齐。 #### Layout Gravity 属性详解 `android:layout_gravity`属性用于控制视图在父容器中的位置。例如,在一个`LinearLayout`中,`...

    a和span组合定义按钮样式实例分享

    在网页设计中,创建美观且功能齐全的按钮是提高用户体验的一个重要方面。尽管按钮通常可以通过使用HTML中的`&lt;button&gt;`标签来实现,但有时开发者可能需要使用不同的标签组合来达成特定的视觉效果或是出于兼容性考虑。...

    前端部分常见知识点

    - 方法一:在浮动元素之后的元素上设置`clear: both;`属性。 - 方法二:触发BFC(Block Formatting Context,块级格式化上下文)——可以通过设置`overflow: hidden;`和`zoom: 1;`实现。 - 方法三:在容器元素上...

    html网页编辑代码大全详细使用方法[借鉴].pdf

    - `&lt;DIV&gt;`:这是一个非常重要的布局元素,它可以作为一个容器,包含其他HTML元素,并通过CSS来控制其样式和位置。`align`属性可以设置容器内的内容对齐方式。 6. **分隔线**: - `&lt;hr&gt;`:创建一条水平分隔线,...

    HTML元素参考手册

    72. `&lt;span&gt;`:创建内联元素容器,用于应用样式或脚本。 73. `&lt;strike&gt;`:显示带删除线的文本,HTML5中推荐使用`&lt;s&gt;`。 74. `&lt;strong&gt;`:表示重要或强调的文本,通常以粗体显示。 75. `&lt;style&gt;`:定义页面样式表...

    利用HTML实现一个个人信息表的网页整理.docx

    这将设置元素的左右外边距为自动,使元素在父容器中水平居中。对于行内元素的居中,可以使用`text-align: center`属性,它将元素内的文本内容水平居中。 创建个人信息表时,常见的元素包括姓名、性别、年龄等。可以...

    HTML面试题

    **问题:** 如何居中一个浮动元素? **答案:** 可以为浮动元素设置`margin`属性,使其左右自动分配空间,实现居中效果: ```css margin: auto; ``` #### 十五、JavaScript检测变量类型 **问题:** 如何使用...

    神奇!js+CSS+DIV实现文字颜色渐变效果

    接着是`.box` 类的选择器,它定义了一个相对定位的容器,具有白色背景、自动宽度、居中对齐、内边距和边框。这个容器将用于展示渐变颜色的文字。 接下来,我们看到DIV部分,这里创建了一个带有特定样式的`&lt;div&gt;`,...

    AntDesign组件库目录.docx

    - **带下拉框的按钮**: 将下拉菜单与按钮结合,形成一个按钮下拉组件。 - **其他元素(分割线和不可用菜单项)**: 支持在菜单中添加分割线以及不可用的菜单项。 - **弹出位置**: 可以设置下拉菜单弹出的位置。 - **...

Global site tag (gtag.js) - Google Analytics