GWT celltableのセル高さを上げる方法：IEの問題？

Question

GWTセルテーブルのセル高さを上げる方法は？

：（コンテンツあたりのような）適切なMozilla Firefoxのセルの高さ

が、インターネットエクスプローラの場合、コンテンツの一部が適切に

を表示していないが、以下のように

マイ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で必要とする変更はありますか？

Answer 1

それは私のための作品:)

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

Answer 2

まず、CSSリセットを行いますか？投稿に続くことは、私が推測するのと同じ問題を指しています。 Why is box sizing set to border-box for tables in Firefox?

問題は、ボックスモデルを扱う際のブラウザの違いに起因する可能性があります。 詳細についてはthis postをお読みください。

ボックスサイズ設定プロパティを設定します。 IEはborder-boxを使用し、他のすべてのブラウザはcontent-box-modellを使用します。 あなたは1つが次の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+ */ 
} 

Answer 3

あなたは

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

Answer 4

高さが割り当てることが最善の解決策ではありません使用することができます内容テキストを増減する。したがって、上記の例を次のようにするケースが2つあります。

A）純粋なCSSを使用する。 B）Javascriptを使用する

説明A： CSSでは、DIV構造を使用しているのか、TABLEメソッドを使用しているのかによってCSSは2つ以上に依存します。 DIVを使用して

A.1：水平方向のテキストの整列に

私たちは、私のページを作成するdiv構造を使用していると私は垂直整列する行の高さを使用する場合は、テキストとテキスト揃えます。

A.2テーブルの使用： メソッドテーブルを使用している場合は、テキストをセルの中央に配置したいと考えています。この奇跡は、私がテキストvertical-align：middleとhorizo​​ntal-align：centerを使用する場合にのみ当てはまります。 注：テキストはタグで記述する必要があります。体内の

CSSなど：TDにおける分の高さのJavascript

使用を使用して、垂直整列とtexlを使用します。

私はイスラム教

Bを愛しアッラー を愛し-alignプロパティは、テキストをそれぞれx軸とy軸で中央と中央に配置します。 しかしIE7、IE8は最小の高さを理解していないので、IE6,7でバグレポートを作成する問題は1つだけです。 IE9.jsファイルをGoogleを使用してダウンロードしています。 htmlドキュメントの先頭にスクリプトを挿入します。また、最新のjqueryファイルを最初に置き、その後にIE9.jsスクリプトを置いてください。

とcssではmin-heightプロパティを使用し、テキストが拡大する範囲でテキストが自動的に表のセルの中央に表示されます。

DIVを使用している場合は、同じプロセスです。

これがあなたに何かを余計にしてくれることを願っています。そして、もう一度Googleを使用する必要はありません。もしあなたがそれを理解していなければ、私に再び尋ねなさい。私はjfiddleの例で異なる音色であなたに返信します。大丈夫ありがとう。 :)

Answer 5

私の問題は、セルのCSSスタイルに "overflow：hidden;"がある可能性があると思います。

.cellTableCell { 
    overflow: hidden; 
    ... 
} 

これを実行して何が起こるかを確認します。私はセルと行がコンテンツに合わせて拡大すると思います。

cellTableRowのCSSには、別の修正方法があります。行スタイルはセルスタイルで上書きする必要がありますが、GWTはIEのブラウザの違いを補うために何かをしているかもしれません。それ常にがTRに含まれているのTDに適用されることを確認するには、このようにそれを書く：すべての準備が整った前ページが表示されるので、

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

Answer 6

私たちは時々、レイアウトを壊す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; 
               }-*/; 

Answer 7

使用この

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

Answer 8

AbstractCellTableBuilderを拡張し、TableRowの高さ属性に言及してください