質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4799閲覧

HTML レイアウト崩れ 助言ください

ranran

総合スコア85

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/08/23 01:24

編集2015/08/23 01:47

お世話になります。

IE8でのレイアウト崩れの修正をしたいのですが、
レイアウトの仕組みを理解してないこともあり手のつけ方がわかりません。
(px、パーセントによる画面のレンダリングエンジンの動き)
学習できるお勧めのサイトと現場経験があるからこその助言がありましたらお願いします。

○状況
テーブルのヘッダ部分のセル幅と、データ部分のセル幅にずれが生じています。
具体的にはデータ15までのセル幅がちぢまっていますが、テーブル自体の幅はヘッダ部分、データ部分ともに同じです。
データ1
5のセル幅は後半に行くにつれずれが少なくなっていきます。
(末尾あたりのセルまで行くと幅はヘッダのセルと同じになります)
データ部分のセル幅のずれを直したいです。

○前提
IE8、IE11でレイアウトが崩れないようにする必要があります。
IE11での画面確認の際にはずれを確認できなかったと思います(ちょっと怪しいです..)
IE8での確認において同じような構成の画面がありますがそちらではずれが生じていません。
このテーブルの構成等は共通部品で定義されています。(他画面にも影響がでるので構成は変えません)
下記のコードはかなり簡略化した一部です、本来はネストが深く、class等付いてます。

○解説
ヘッダ部分、データ部分のテーブル幅はpxで指定されています。
ヘッダ部分のセル幅はmin-width、max-widthで設定されています。
データ部分のセル幅は特に指定されていません。
(ヘッダ部分のセル幅と同じようにmin-width、max-widthを使いましたが変化ありませんでした)
データ部分のセルの中にはlabelやbuttonやdivなどあります。

○追記
1)
ヘッダ部分でのmin-width、max-widthで各セルの幅を決めています。
例:min-width : 100px、max-width: 100px
2)
ヘッダ部分はHTMLで書かれていますが、
テーブル部分はjavascriptによって表示されています。

<table> <tr> <th>ヘッダ1</th> <th>ヘッダ2</th> <th>ヘッダ3</th> <th>ヘッダ4</th> <th>ヘッダ5</th> </tr> </table> <table> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> <td>データ4</td> <td>データ5</td> </tr> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> <td>データ4</td> <td>データ5</td> </tr> <!-- 行が続きます --> <table>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

適用されているCSSがよくわかりませんが、以下のURLは参考になりますか?
http://www.loconoco.info/?p=665

別サイトで調べてみると、以下のようなコードもありました。

HTML

1<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

WEBサイトの動作検証など行われると思いますが、IE8のアクセスの比率など
かんがみて、動作保障の範囲外とされるなど、費用対効果も考慮された方が、
良いかもしれません。

有名所では、Githubや、SlideShareなどIE8は未サポートとなってきていたり
します。

投稿2015/08/23 08:59

編集2015/08/23 09:04
Ken.sakanakana

総合スコア1768

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ranran

2015/08/23 10:58

回答ありがとうございます! 似た構成の画面ではレイアウトのずれが確認されていないので、 うまいこと解決できるのではないかと模索しています。 もう少し調べどうにもならないようならmetaタグの利用を検討しようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問