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
javascript countdown prompt box
This article example shares the specific code of ...
Generate OpenSSL certificates in Linux environment
1. Environment: CentOS7, Openssl1.1.1k. 2. Concep...
A brief discussion on VUE uni-app conditional coding and page layout
Table of contents Conditional compilation Page La...
CSS commonly used font style to set the font of a variety of changes (example detailed explanation)
CSS font properties define the font family, size,...
Solve the problem of Navicat for Mysql connection error 1251 (connection failed)
Because what I wrote before was not detailed enou...
Element tree control integrates a drop-down menu with icons (tree+dropdown+input)
Table of contents Requirements: Implementation st...
About the garbled problem caused by HTML encoding
Today a junior student asked a question. The HTML...
Three ways to align div horizontal layout on both sides
This article mainly introduces three methods of i...
The process of installing Docker in Linux system
In this blog, I will walk you through the process...
Install MySQL5.5 database in CentOS7 environment
Table of contents 1. Check whether MySQL has been...
Method for realizing Internet interconnection by VMware virtual machine bridging
After installing VMware and creating a new virtua...
Goodbye Docker: How to Transform to Containerd in 5 Minutes
Docker is a very popular container technology. Th...
HTML Editing Basics (A Must-Read for Newbies)
Open DREAMWEAVER and create a new HTML. . Propert...
Native js to achieve seamless carousel effect
Native js realizes the carousel effect (seamless ...
Tutorial on how to remotely connect to MySQL database under Linux system
Preface I recently encountered this requirement a...