按钮在 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
投稿猜你喜欢
- 简介:外部连接和自联接inner join(等值连接) 只返回两个表中联结字段相等的行left join(左联接) 返回包括左表中的所有记录
- 数据库镜像方案有两种镜像运行模式。一种是“高安全性模式”，它支持同步操作。在高安全性模式下，当会话开
- 如何制作K线图？也不难，代码和说明见下：<％@ Language=VBScript ％><％Respo
- <％@LANGUAGE="xxx" CODEPAGE="936"％>一般又分为<％
- 代码如下: Function closeHTML(strContent) Dim arrTags, i, OpenPos, ClosePos
有时候我们会在页面上显示用户的所在地区，这个原理是：先得到用户的IP，然后去查询将IP转换成一个数值，最后去查这个数值所在的范围，来得到用户- 这个问题困扰了我很长很长的时间，在跨域获取数据的时候就要用到服务器端的对象，以前一直用的是Msxml.XMLHTTP。但是问题太多了，特别严
- 新一代W3C，xhtml代码规范，大家在设计网站的时候务必遵循这一规范 ，这将对网站的优化，网站的推广，搜索引擎的友好
- 微软上周发布了一份关于 Windows Internet Explorer 8 浏览器（以下简称为 IE 8）性能优化的白皮书《Window
- Oracle9i中提供强大的迁移功能，可以从多种数据库向Oracle迁移数据。Oracle新发行的迁移工具提供了从Access2
- 如何用OdbcRegTool组件来创建一个数据源？OdbcRegTool是一个免费组件，在服务器上安装后，就可以来创建一个数据源：<h
- 你和用户之间的网站堆栈（简化版）在TXJS大会的最后一天，一个开发者问我：面向对象的CSS没有给你留下一大堆基于表现的class名?网络堆栈
- 前几天，酋长同学在日志里提到了关于Google宽松的管理制度，一个产品任务下来是没有时间限制的，Google深信在有时间限制下的产品肯定是不
- 在这篇文章（不敢妄称教程，最多称之为学习笔记）里，我会从头开始实现客户端模板的效果。不过你不要期望能够在这里找到可以直接拿去使用直接复用灵活
- 用语言实现 好处： 1、可以减少对数据库的访问。 2、可移植性好。 坏处： 1、操作起来考虑的东西较多，修改一处就要修改别一处。也就是说是相
- 首先将ORACLE 10g的安装光盘放入光驱，如果自动运行，一般会出现如图1安装界面： 图1 单击“开始安装”，就可以安装ORACLE 10
- 不正确地调用Windows应用程序接口可能会产生一些意想不到的副作用，以及潜在地对一个应用程序的代码及数据段的破坏。正确地使用一个空的32位
- 从小的方面讲，帮助一般是指：手册、说明书、文档、FAQ 等等。从大的方面讲，可以是交互过程中的提示、指引、演示等信息，帮助无处不在！这一切，
- 进行访问MySQL数据库的方法有很多种，下面将向大家介绍一些很简单实用的用的方法和示例与大家一起分享。方法一：使用MYSQL推出的MySQL
- 由于工作对人的眼球和精神都会带来一定的疲劳，所以在界面设计中，希望用户能够准确的关注重要的信息，而不因为用户的长期使用而流失信息。最近在看《
