-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (93 loc) · 3.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--
PREREQUISITES: jQuery
INSTALLATION:
1. Download jquery.IEBoldOpacityFix.js from https://github.com/orthes/IEBoldOpacityFix
2. Insert <script src="jquery.IEBoldOpacityFix.js" type="text/javascript"></script> to <head>
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>IE Bold Opacity Fix</title>
<!-- Only example CSS styles -->
<style type="text/css">
body {
font-family: Arial;
font-size: 9pt;
margin: 20px;
background: #015391;
}
img {
border: 4px solid #ccc;
padding: 2px;
}
.container {
width: 560px;
padding: 20px;
margin: 10px auto;
}
.background {
background: #fff;
}
.backgroundYellow {
background: #fbf4aa;
}
.opacity {
filter: alpha(opacity=50);
}
.opacity100 {
filter: alpha(opacity=100);
}
</style>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!--
The only thing to install is to insert this to <head>:
<script src="js/jquery.IEBoldOpacityFix.js" type="text/javascript"></script>
-->
<script type="text/javascript">
/**
* This is only for demonstration purposes!
*/
$(document).ready(function () {
$('#use-fix').click(function () {
$('head').append('<script src="js/jquery.IEBoldOpacityFix.js" type="text/javascript" />');
});
});
</script>
</head>
<body>
<div class="container background">
<div class="opacity">
<h1>IE Bold Opacity Fix</h1>
<p>It is a known issue, that <b>IE's alpha opacity ruins bold</b> text.</p>
<p>This problem occures especially in <b>Internet Explorer 8 running on Windows XP</b>.</p>
</div>
</div>
<div class="container background">
<p>If you're using MSIE 8 the header above and all bold text on this website will look like this:</p>
<p><img src="img/example01.png" alt="example" /></p>
</div>
<div class="container background">
<div class="opacity100">
<p>This <b>problem persists</b> even if opacity is set to 100.</p>
</div>
</div>
<div class="container backgroundYellow">
<div class="opacity100">
<h2>Now try to use IEBoldOpacityFix</h2>
<button id="use-fix">Use IEBoldOpacityFix</button>
</div>
</div>
<div class="container" style="filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#e5FFFFFF,endColorstr=#e5FFFFFF);">
<div class="opacity">
<p>This is demonstration how it works with <b>filter: progid:DXImageTransform.Microsoft.gradient</b>.</p>
</div>
</div>
<div class="container">
<div class="opacity">
<p>jquery.IEBoldOpacityFix.js works even on elements with parents with <b>no or transparent backgrounds</b>.</p>
</div>
</div>
</body>
</html>