2
我遇到了div表格控制問題,我寫在IE中正確顯示。在IE瀏覽器中的表格格式問題
我的「桌子」只是一系列看起來像一張桌子的div,在FF和Chrome中一切看起來不錯,但似乎無法讓我的「行」在IE中正確顯示。
它似乎將所有行都擠壓到表格的左側,然後包裹它們。我可以通過調整行div的寬度來調整它,但我想找到另一個解決方法,因爲這是一個控件,並且知道適用的寬度可能很困難。這裏是它正在做的一個屏幕截圖。
也只是注意到,當我最大化我的22英寸寬屏我的屏幕上正確地監視它行了一切。不知道那裏發生了什麼。
這裏是我的CSS,我認爲這些標題足夠說明問題。
.dataTable
{
border-style: solid;
border-width: .5px;
border-color: #dae2c1;
border-collapse: collapse;
font-family: PTSansCaptionBold, Arial, Sans-Serif;
}
.Table div
{
font-size: 12px;
color: #888;
margin: 0;
float: left;
overflow: hidden;
}
.HeaderRow div
{
border: 1px solid #f3f5eb;
padding: 5px 3px;
background-color: #bcc3a7;
color: #FFFFFF;
opacity: 0.7;
text-transform: uppercase;
-moz-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
}
.DataRow
{
clear: both;
}
.DataRow div
{
border: 1px solid #000000;
border-color: #e7ecd7;
padding: 5px 3px;
min-height: 12px;
}
下面是一些HTML
<div class="HeaderRow">
<div style="width: 100px; text-align: left;"><span id="arrow"></span>DRAWING #</div>
<div style="width: 100px; text-align: left;"><span id="arrow"></span>LOT #</div>
<div style="width: 100px; text-align: left;"><span id="arrow"></span>Serial #</div>
<div style="width: 100px; text-align: left;"><span id="arrow"></span>AS BUILT</div>
<div style="width: 100px; text-align: left;"><span id="arrow"></span>AS DESIGN</div>
<div style="width: 200px; text-align: left;"><span id="arrow"></span>DESCRIPTION</div>
</div>
<div class="DataRow">
<div style="width: 100px; text-align: left;">0102-10002</div>
<div style="width: 100px; text-align: left;"> </div>
<div style="width: 100px; text-align: left;">1004</div>
<div style="width: 100px; text-align: left;">94</div>
<div style="width: 100px; text-align: left;">9</div>
<div style="width: 200px; text-align: left;">HUT (HARD UPPER TORSO ASSY)</div>
</div>
但是...的寬度,你爲什麼不使用''
Divs給了我更多的靈活性,我在這個控制中尋找。 – 2011-05-03 13:25:15
你可以請一些1或2行的HTML。順便說一句。半像素的邊界寬度?應該如何呈現? – DanielB 2011-05-03 13:26:27
回答
您可以嘗試明確設置每行的寬度等於標題的寬度。
在jQuery中也許試試這個:
然後設置等於每行
來源
2011-05-03 14:48:33
這工作。不確定爲什麼標題行的形式正確,我想我在我的數據行上覆蓋了一些導致問題的東西。 – 2011-05-03 18:09:25
的爲此,您應該使用一個表,但現在你做了這樣...只有使用的CSS的IE瀏覽器和設置寬度小。你必須這樣做,因爲IE的盒子模型與現代瀏覽器不同。此外,如果您不使用表格,則可能需要針對IE 6和7專門調整widh。
來源
2011-05-03 14:16:45 zozo
除了表格註釋(我同意)之外,您確定沒有生成開始或結束
div
內容部分太多?以防萬一......我現在無法在IE中測試,但是如果您的標題行顯示正確且內容行不正確,我會嘗試消除兩者之間的差異以查看導致此問題的原因問題。像
clear:both
,position:relative
等IE中的開發人員工具可以幫助那裏。找到導致它的原因後,您可以查找針對IE的備用解決方案。
順便說一下,具有特定ID的元素只能在頁面上出現一次,並且您有幾個
<span id="arrow">
。來源
2011-05-03 14:40:34 jeroen
相關問題