JSFiddle - React, Tailwind, and code Playground
by htmlboy
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE 7 button text redraw bug</title>
<style type="text/css">
/* styles for page, unrelated to demo */
body {font-family: Calibri, "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
li {margin-bottom:1em;}
a {color: #6EAB23;}
p#footer {color: #999;}
/* styles for demo */
.button {
overflow: visible; /* Needed to fix padding bug in IE 7 and 6 */
display: inline-block;
width: auto;
height: auto;
margin: 0 10px 10px 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
font-family: ClearviewATT-Book, serif;
text-align: center;
line-height: 1.2;
cursor: pointer;
}
.button:focus, .button:active {
outline: 1px dotted #000;
}
button::-moz-focus-inner {
border: 0;
}
.btn-size1 {
padding: 11px 20px;
font-size: 20px;
}
.btn-size2 {
padding: 8px 20px;
font-size: 14px;
}
.btn-size3 {
padding: 6px 10px;
font-size: 12px;
}
.btn-blue {
background-color: #2491c6;
color: #fff;
text-shadow: 1px 1px 1px hsla(0,0%,0%,.4);
}
.btn-blue:hover, .btn-blue:focus {
background-color: #0099D5;
}
.btn-green {
background-color: #739d00;
color: #fff;
text-shadow: 1px 1px 1px hsla(0,0%,0%,.4);
}
.btn-green:hover, .btn-green:focus {
background-color: #7daa00;
}
.btn-white {
border: 1px solid #dbdbdb;
background-color: #fff;
color: #005b95;
}
.btn-disabled {
background-color: #999;
color: #fff;
text-shadow: 1px 1px 1px hsla(0,0%,0%,.4);
}
</style>
</head>
<body>
<h1>IE 7 button text redraw bug</h1>
<p>Scroll the page down so the buttons move out of the viewport. Then scroll back up to see the missing lines drawn in the button text in IE 7. <a href="http://zomigi.com/blog/ie-7-button-text-redraw-bug/">Read the article</a> that this test...