括弧を使用して数値を負の値として表示しているときに、CSS を使用してテーブル内の数値を揃えようとしています。MS Word で 10 進タブを使用するのと同じように。
CSS は IE6 以降で動作しますが、私の問題は印刷プレビュー内の IE6 - IE9、またはページが印刷されるときに、右ブラケットのパディングが指定された値よりも大きくなります。Chrome と Firefox 内での細かい印刷。
これを修正するために誰かが私を正しい方向に向けることができますか?
コード：
<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>