IE で div に問題があります。以下は、FF と IE で表示された一連の div の 2 つの画像です。
縁取りの所に白い線が出ているのがわかります。このdivを動的に作成しています。
<DIV style="WIDTH: 49px" class=ganttview-grid-row-cell sizset="36" sizcache07230265382227504="352">
<br/>
<DIV style="TEXT-ALIGN: center; WIDTH: 11px" class=ganttview-grid-row-cell-partition></DIV>
<br/>
<DIV style="TEXT-ALIGN: center; WIDTH: 11px" class=ganttview-grid-row-cell-partition></DIV>
<br/>
<DIV style="TEXT-ALIGN: center; WIDTH: 11px" class=ganttview-grid-row-cell-partition></DIV>
<br/>
<DIV style="TEXT-ALIGN: center; WIDTH: 11px" class="ganttview-grid-row-cell-partition last"></DIV><br/></DIV>
上記は、div 用に動的に生成されたコードです。div 用に定義されたクラスを以下に示します。
div.ganttview-grid-row-cell {
float: left;
/* IE problem */
position:relative;
/*top: 0;
left: 0;*/
z-index:0;
}
div.ganttview-grid-row-cell-partition {
border-right : 1px dotted #6B6659;
font-size: 150%;
color: black;
height: 21px;
line-height: 120%;
float : left;
}
div.ganttview-grid-row-cell-partition.last {
border-right: none;
margin-right: 0px;
}
すべての IE バージョンでこのギャップがあります。どこが間違っているのかわかりません。これに関連する他の質問を見つけて、すべて試しましたが、うまくいきませんでした。例えば
1) 追加
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
ヘッドタグで。
2) 位置をアブソリュートに設定
3)マージンパディングをすべてゼロに設定します。
いくつかのテストの後、いくつかのポイントを追加します。前述のように、これらは動的に作成された div です。以下に、作成方法の jquery のコードを示します。
for(var z = 1 ; z <= 4 ; z++ ) {
$i5MinPartition = jQuery("<div>",
{
"class": "ganttview-grid-row-cell-partition",
"css": { "width": ((cellWidth/4) - 1) + "px", "text-align": "center"}
});
if(bgData[count] && bgData[count].workloadValue >= j) {
$i5MinPartition.css({"background": "#669900"});
}
if(bgData[count] && bgData[count].scheduleAllocationValue >= j) {
$i5MinPartition.text('x');
}
cellDiv.append($i5MinPartition);
count++;
}
ここでの cellWidth は 50 です。現在、IE は幅に 10 進値を使用していませんが、firefox はそれを使用していることがわかりました。
方程式
(セル幅/4) - 1
IEでは11ですが、FFでは11.5になります。
助けてください。
前もって感謝します。