CSS Div Padding Issue Internet Explorer
Question
I am trying to use CSS to align numbers in a table when brackets are used to show the number as a negative value. Like you would use decimal tabs in MS Word.
The CSS works in IE6 and up but my problem is for IE6 - IE9 within print preview or when the page is printed the right bracket padding becomes greater than the specified value. Its fine printing within Chrome and Firefox.
Can anyone point me in the right direction to fix this?
The code:
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css" />
<style type="text/css">
/* Ignore stuff below */
html{
font-family: arial, tahoma, sans-serif;
font-size: 12px;
line-height: 1.25em;
color: #333;
-webkit-font-smoothing: antialiased;
text-align: center;
background: #eee;
}
.wrapper{
width: 780px;
margin: 10px auto;
padding: 10px;
background: #fff;
}
table{
width: 100%;
font-size: 24px;
line-height: 1.25em;
}
h1{
font-size: 18px;
line-height: 1.25em;
text-align: left;
background: #eee;
padding: 5px 10px;
}
/* Ignore stuff above */
.pR{
padding-right: 10px; /* Needs to match width of .bracket below */
}
.bracket{
width: 10px; /* Needs to match padding-right of .pR above */
text-align: center;
display: inline-block;
/* Fix for inline-block for IE 7 */
zoom: 1;
*display: inline;
}
.right{
text-align: right;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>With padding</h1>
<table>
<tr>
<td class="right pR">1</td>
</tr>
<tr>
<td class="right"><div class="bracket">(</div>1<div class="bracket">)</div></td>
</tr>
</table>
</div>
</body>
</html>
1 answers
solution1
0 2013-04-05 05:36:02
NO need to use div. Use span element in place of div.
Div is block element that why creating issue.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.