Button is stretched on both sides in IE
|
When you write buttons (input, button), you will find that in IE: As the number of words increases, the spacing on both sides will become larger. In the XP style of WIN, when there are a lot of words, serious jagged edges will appear on both sides. What is the reason? The original moderator of the Blue Ideal WEB Standardization Column, zbm2001z, gave an answer: 1. IE will generate a total of one byte of padding width on both sides of the button for every 4 bytes (2 bytes for Chinese characters) added to the value of the button. 2. The default style of IE buttons (XP style) is a fixed-size rounded rectangular image as the background. Therefore, once the button becomes wider and taller, the edges of this fixed-size rounded rectangular image will naturally become "rough". We have no way to solve the second problem for now unless the WIN system fixes the bug itself, but we can still fix the first problem. In IE, set the visible value of the overflow attribute for the button element (Note: the padding value is only valid after the overflow:visible attribute is set). This attribute has actually been used in the last article "An Application of background-clip and background-origin". However, after reading "The stretched buttons problem in IE" today, I found that there is a small bug - if the button is placed in a table cell, although the button is displayed correctly, the originally reserved width size has not changed and still occupies space. It is necessary to set the button width (width) to 0 in IE6 (IE7 also has this bug, but no good solution has been found yet). The final repair code is as follows (Demo): input.button { padding: 0.25em; width: auto; _width: 0; overflow:visible !ie;} |
<<: Let's talk in detail about the difference between unknown and any in TypeScript
>>: The ultimate solution to the problem of Chinese garbled characters in tomcat static pages (html)
Recommend
Linux kernel device driver virtual file system notes
/******************** * Virtual File System VFS *...
Detailed explanation of MySQL/Java server support for emoji and problem solving
This article describes the support and problem so...
Detailed explanation of jQuery's animate animation method and animation queuing problem solution
Table of contents animate() animation method Anim...
Table Tag (table) In-depth
<br />Table is a tag that has been used by e...
Implementation of Portals and Error Boundary Handling in React
Table of contents Portals Error Boundary Handling...
Some major setting modification records when upgrading from kubernetes1.5.2 to kubernetes1.10
This article records some major setting changes w...
Nginx signal control
Introduction to Nginx Nginx is a high-performance...
React diff algorithm source code analysis
Table of contents Single Node Diff reconcileSingl...
Solution to the problem of MySQL deleting and inserting data very slowly
When a company developer executes an insert state...
10 excellent Web UI libraries/frameworks
1. IT Mill Toolkit IT Mill Toolkit is an open sou...
Detailed explanation of Docker usage under CentOS8
1. Installation of Docker under CentOS8 curl http...
How to generate Vue user interface by dragging and dropping
Table of contents Preface 1. Technical Principle ...
Basic usage examples of listeners in Vue
Table of contents Preface 1. Basic usage of liste...
Mysql practical exercises simple library management system
Table of contents 1. Sorting function 2. Prepare ...
JavaScript anti-shake case study
principle The principle of anti-shake is: you can...