css 如何增加GWT单元格表的单元格高度:IE问题?

szqfcxe2  于 2023-02-01  发布在  其他
关注(0)|答案(8)|浏览(146)

如何增加GWT单元格表的单元格高度?
在mozilla firefox中,单元格高度正确(根据内容),但在Internet Explorer中,部分内容未正确显示
参见图片

我的Celltable.css如下所示:

@def selectionBorderWidth 0px;
.cellTableWidget {
    border: 1px solid red;
}

.cellTableFirstColumn {

}

.cellTableLastColumn {

}

.cellTableFooter {
    text-align: left;
    color: #4b4a4a;
    overflow: hidden;
}

.cellTableHeader { /** COLUMN HEADR TEXT */
    text-align: left;
    color: #4b4a4a;
    overflow: hidden;
    background-color: #E1E1E1;
    font-family: arial, Helvetica, sans-serif;
    font-size: 8pt;
    font-weight: bold;
    padding-left: 10px;
    height: 20px;
    border-bottom: #e6e6e6 1px solid;
    border-left: #a6a6af 0.5px solid;
    border-right: #e6e6e6 1px solid;  
    border-top: #a6a6af 0.5px solid;
}

.cellTableCell {
    overflow: hidden;
    padding-left: 10px;
    height: 20px;
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    border-bottom: #e6e6e6 1px solid;
    border-left: #a6a6af 0.5px solid;
    border-right: #e6e6e6 1px solid;  
    border-top: #a6a6af 0.5px solid;
}

.cellTableFirstColumnFooter {

}

.cellTableFirstColumnHeader {

}

.cellTableLastColumnFooter {

}

.cellTableLastColumnHeader {

}

.cellTableSortableHeader {
    cursor: pointer;
    cursor: hand;
}

.cellTableSortableHeader:hover {
    color: #6c6b6b;
}

.cellTableSortedHeaderAscending {

}

.cellTableSortedHeaderDescending {

}

.cellTableEvenRow {
    background: #ffffff;
}

.cellTableEvenRowCell {

}

.cellTableOddRow {
    background: #f8f8f8;
}

.cellTableOddRowCell {

}

.cellTableHoveredRow { /** background: #eee;*/

}

.cellTableHoveredRowCell {
    /** border: selectionBorderWidth solid #eee; */

}

.cellTableKeyboardSelectedRow {
    background: #ffc;
}

.cellTableKeyboardSelectedRowCell {

}

.cellTableSelectedRow {
    background-image: url("images/row_Highlight.jpg");
    color :   black;
    height: auto;
    overflow: auto;
}

.cellTableSelectedRowCell {

}

/**
 * The keyboard selected cell is visible over selection.
 */
.cellTableKeyboardSelectedCell {

}

@sprite .cellTableLoading {
    gwt-image: 'cellTableLoading';
    /*margin: 20px;
*/}

我需要在css中做什么改变来使所有浏览器保持一致性(单元格高度)?

axr492tv

axr492tv1#

我认为问题可能是单元格的CSS样式有“overflow:隐藏的;"。

.cellTableCell {
  overflow: hidden;
  ...
}

把那个拿开,看看会发生什么。我想单元格和行会扩大以适应内容。
cellTableRow的CSS还有另一个可能的修正。行样式应该被单元格样式覆盖,但是GWT可能在幕后做了一些事情来补偿IE中的浏览器差异。为了确保它总是应用于TR中包含的TD,可以这样写:

.cellTableRow,
.cellTableRow td {
  overflow: auto;
  ...
}
t1rydlwq

t1rydlwq2#

首先,你做了CSS重置吗?下面的帖子提到了同样的问题,我猜。Why is box sizing set to border-box for tables in Firefox?
这个问题可能是由浏览器处理box-model的方式不同引起的。阅读this post了解更多信息。
我会设置box-sizing属性。IE使用border-box,其他浏览器使用content-box-modell。你可以定义,哪一个应该使用下面的css规则:

table { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

table { 
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: content-box;    /* Firefox, other Gecko */
    box-sizing: content-box;         /* Opera/IE 8+ */
}
fae0ux8s

fae0ux8s3#

我们有时会遇到IE破坏布局的问题,因为页面在一切准备就绪之前就呈现了。尝试一下,如果在DOM中为某个元素分配一个虚拟的CSS类会改变什么。
如果是这样的话,下面的代码可能会对你有所帮助,它只是在body元素上设置一些随机类,然后重置它以强制页面重新呈现:

/**
 * Force Internet Explorer 8 to render the page again without a page refresh. after the given delay of milliseconds. This
 * method only works for Internet Explorer 8.
 * 
 * @param delayInMillis delay in milliseconds
 */
public void forceIe8ToReRender(final int delayInMillis) {
    // call timer to force ie8 to re-render page without page refresh
    final Timer t = new Timer() {

        @Override
        public void run() {
            doForceBrowserToReRender();
            // timer should only run once
            this.cancel();
        }
    };
    t.schedule(delayInMillis);
}

/**
 * Force Browser to render the page again without a page refresh
 */
private native void doForceBrowserToReRender()/*-{
                                              var doc = $doc;
                                              var originalClassName = doc.body.className;
                                              doc.body.className = "foobar";
                                              doc.body.className = originalClassName;
                                              }-*/;
ql3eal8s

ql3eal8s4#

用这个

.cellTableCell { min-height : 20px ; ..... }
gkn4icbw

gkn4icbw5#

您可以使用

.cellTableKeyboardSelectedRow {
    background: #ffc;
    height:30px !important
}
nr7wwzry

nr7wwzry6#

对我很有效:)

/** Cell height */
.mainCellTable tbody tr td{
    height: auto;
}
qmb5sa22

qmb5sa227#

扩展AbstractCellTableBuilder,并引入TableRow的高度属性

epfja78i

epfja78i8#

高度不是指定文本增加或减少位置的最佳解决方案。2因此,有两种情况可以让你的上面的例子如下。
A)使用纯CSS。B)使用Javascript
说明A:在CSS中,我们依赖于另外两件事,无论我们是使用DIV结构还是使用TABLE方法。
A.1使用DIV:
如果我们使用div结构来构建我的页面,我使用line-height来垂直对齐文本,使用text-align来水平对齐文本。
A.2使用表:如果我使用的是方法表,那么我希望将文本居中在单元格的中间。当且仅当我使用文本垂直对齐:中间和水平对齐:中心时,这个奇迹才成立。这段文字应该用标签写。

正文中的CSS为:

我爱真主我爱伊斯兰
B:使用Javascript
在td中使用min-height属性,使用vertical align和texl-align属性分别将文本在x轴和y轴上居中,但只有一个问题,它会在IE6,7中创建bug报告。因为IE7,IE8不理解最小高度。所以我们有IE9.js文件,你用谷歌下载它。并把脚本在html文件的头部。另外,将最新的jquery文件放在第一位,然后将IE9.js脚本放在其后。
并在css享受最小高度属性和多远,你的文本增长,文本将自动在中间的表格单元格.
如果您使用DIV,则过程相同。
我希望这会让你有额外的东西。而且你将不需要再使用谷歌了。

相关问题