按钮在 IE 中两边被拉伸的 BUG
作者：blank 来源：怿飞blog 发布时间：2008-11-17 20:37:00
标签：bug,按钮,ie,浏览器
大家在写按钮（input、button）的时候会发现在 IE 下：
随着字数的增多，两边的间距也会越来越大。
在 WIN 的XP 风格下，当字数很多时，两边还会出现严重的锯齿。
到底是什么原因呢？
蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案：
1、IE 在按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
2、IE 的按钮（XP 风格）默认样式是一个固定尺寸的圆角矩形图片作背景，所以一旦按钮变宽变高后，这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。
对于第二个问题我们暂时没办法去解决，除非 WIN 系统自己修复 BUG ，但对于第一个问题 ，我们还是可以修复的。
IE 下给按钮元素设置 overflow 属性的 visible 值（注 ：padding 值仅在设置了overflow:visible 属性后才有效），这个属性其实在上次写的《background-clip 与 background-origin 的一则运用》一文中已经使用。不过在今天阅读了《The stretched buttons problem in IE》后，发现原来还有一个小 BUG —— 如果将按钮置于表格单元格中，虽然按钮显示正确了，但是原先预留的宽度大小却没有改变，仍然占据着空间，需要在 IE6 中设置按钮的宽度（width）为 0（IE7同样也存在此 BUG，但暂时没有寻找到好的方式解决）。
最终的修复代码如下（Demo）：
input.button {
padding: 0 .25em;
width: auto;
_width: 0;
overflow:visible !ie;}
0
投稿猜你喜欢
- PyQt5安装 在cmd下输入pip install PyQt5 完成PyQt5安装，安装完成后，在python安装目录下可以看到配置PyC
- 在mysql数据库中，mysql key_buffer_size是对MyISAM表性能影响最大的一个参数(注意该参数对其他类型的表设置无效)
微信小程序分享效果：js代码：page({/** * 用户点击分享按钮或右上角分享 */ onShareAppMessage: functi- excel 文件内容如下:读取excel内容:import xlrdfrom datetime import datetimefrom xl
- 数在 Python 中，对数的规定比较简单，基本在小学数学水平即可理解。那么，做为零基础学习这，也就从计算小学数学题目开始吧。因为从这里开始
- 在开发网站的过程中,404,500错误，是不可避免产生的。一旦产生了这种错误，很多可以通过web server 来处理。比如使用 apach
- SQL Server数据库快捷键：书签：清除所有书签。 CTRL-SHIFT-F2书签：插入或删除书签（切换）。 CTRL+F2书签：移动到
- 本文实例讲述了Python subprocess模块功能与常见用法。分享给大家供大家参考，具体如下：一、简介subprocess最早在2.4
- 本文实例讲述了ES6 Promise对象的应用。分享给大家供大家参考，具体如下：The Promise object represents
- 有这样一张表，表数据及结果如下：school_idschool_nametotal_studenttest_takers1239Abraha
- Go的三种安装方式Go有多种安装方式，你可以选择自己喜欢的。这里我们介绍三种最常见的安装方式：1.Go源码安装：这是一种标准的软件安装方式。
- 前言相信大家在日常工作生活中少不了和邮件打交道，比如我们会用邮件进行信息交流，向上级汇报日常工作；再比如大家熟悉的某个WEB系统注册阶段，通
- 前言我们在处理数据库的问题的时候，有时在数据库端看不到异常的等待，但是应用却报连接异常。这种情况，有可能是在压力还没有传递到数据库，在网络这
- 开发环境开发环境为：Win 10（64位）Python 3.7.0Django 2.1安装Pythonpython的安装为比较简单，首先找到
- 字典是可变的，并且可以存储任意数量的Python对象，包括其他容器类型另一个容器类型。字典包括键对(称为项目)及其相应的值。Py
- 原文作者：青女 附注及色样添加：Quester西式的色名及色样表，可以参见以下链接 (Java 类色彩兼容)：http
- 前面我们讲了 TCP 编程，我们知道 TCP 可以建立可靠连接，并且通信双方都可以以流的形式发送数据。本文我们再来介绍另一个常用的协议–UD
- 1. 表单框类型<!DOCTYPE html><html lang="en"><head&
- 遇到这样一个情况想将变量v转化为[]string类型var v interface{}a := []interface{}{"1&
- 作者：Roland Smart原文链接：http://www.adaptivepath.com/ideas/newsletter/archi
