Macでのxhtmlのレイアウト崩れ、<inputText>の無効化

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
今までWindows環境で開発をしていたのですがMacbook Proを購入したため現在はOSXでの開発をしています。前に開発をしていたWebアプリなのですがMacで見たところレイアウトが崩れていて、それだけでなく<h:inputtext>まで効かなくなってしまいました。これはなぜでしょうか？回答よろしくお願いします。xhtmlを使っています。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ
Macでのレイアウト崩れ

エラーメッセージ

###該当のソースコード

ここにご自身が実行したソースコードを書いてください
 <div class="title">
                <h2>お申込み画面</h2>
            </div>
            <div class="gallery">
                <img src="./resources/images/Capture.JPG"></img>
            </div>

            <div class="husbandmessage">お名前、生年月日をそれぞれ入力してください。</div>
            <table border="1" cellspacing="0" cellpadding="2" class="husband"> 
                <tr>
                    <td class="husbandheadrow">
                        名前
                    </td> 
                    <th>
                        (姓) <h:inputText id="firstName" required="true" requiredMessage="必須"
                                         value="#{bb.firstName}" label="名前"/>
                        (名) <h:inputText id="lastName" required="true"
                                         requiredMessage="必須" value="#{bb.lastName}"/>

                    </th>
                </tr> 
                <tr>
                    <td class="husbandheadrow">
                        名前(ふりがな)
                    </td> 
                    <th>
                        ＜全角ひらがなのみ＞
                        (姓) <h:inputText id="firstNameHurigana" required="true"
                                         requiredMessage="必須" value="#{bb.firstNameHurigana}"/>
                        (名) <h:inputText id="lastNameHurigana" required="true" requiredMessage="必須"
                                         value="#{bb.lastNameHurigana}"/><br/>
                    </th>
                </tr>

###試したこと
課題に対してアプローチしたことを記載してください
cssをptからpxにするなどしましたがダメでした。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

gin

2016/10/30 03:00

CSSとhtmlとして生成された該当部分のコードがあったほうがよいと思います。またレイアウト崩れとは具体的に何かどうなっているのでしょう？

anonyrabbit

2016/10/30 22:15

回答ありがとうございます。入力フォームが消え、画面全体が左づめになってしまっています。

gin

2016/10/31 01:30

生成されたhtmlとcssがないと何とも言えないですね。一応ですが、いま↑のコード(をhtmlファイルとして見る)だけだとwinでも入力フォーム出てこないですよ。

anonyrabbit

2016/10/31 04:27

とても不可思議なことが起こりました。自分もWindows環境で見てみたのですが、以前とは違ったようにひょうじされていました。なぜでしょうか。。。。Gitを使ったのが原因とは考えられますでしょうか？本当にわかりません。キツネにつままれたような気持ちです。

gin

2016/10/31 04:35

以前とは違ったというのはMacと同じ状態ってことですよね？

anonyrabbit

2016/11/02 13:02

はい、そうです。ビルドの関係でJSFがよみこまれていないとかでしょうか。。。

行動規範の内容に同意します

回答1件

ベストアンサー

出力されたHTML（ブラウザで「ページのソースを表示」）やCSSが質問文に無いので、見える範囲で1点指摘します。

HTML
1<img src="./resources/images/Capture.JPG"></img>
2```では無く
3```HTML
4<img src="./resources/images/Capture.JPG" />

【XHTMLでの終了タグの書き方】
http://css.uka-p.com/xhtml/end_tags.html

あと、「MAC」「Windows」ではなくブラウザ名（及びバージョン）を書かれたほうが良いです。

投稿2016/10/30 05:21

編集2016/10/30 05:31

kei344

総合スコア69407

anonyrabbit

2016/10/30 22:18

そうなのですか？ブラウザはクロームで変わっていないのでブラウザのせいではないかと思っていました。xhtmlの終了タグはおそらくきちんとできているはずなのですが。。。

kei344

2016/10/31 02:13

> ブラウザはクロームで変わっていないそういうことは質問文にかかれないと回答者にはわからないです。それぞれインストール時のデフォルトブラウザを指している可能性もあるため、回答欄での指摘をしました。 > xhtmlの終了タグはおそらくきちんとできているはず imgタグには終了タグはありません。【img - HTML | MDN】 https://developer.mozilla.org/ja/docs/Web/HTML/Element/img

miyabi-sun

2016/10/31 02:38

横から失礼します。 > ブラウザはクローム大筋は同じですが、特定のバージョンやOSで挙動が異なる事があります。よくあるのはフォントの違いで、基本的にMacの方が文字がでかいので意図しない改行でレイアウト崩れが発生するのは日常茶飯事です。また、例えばCSSで特定の要素をホバーした時に文字が大きくなるような設定をしており、認識点ギリギリにマウスカーソルを置いてホバー・ホバー解除が連続で発生した時のような挙動に差異が出る事があります。

anonyrabbit

2016/10/31 04:32

回答ありがとうございます。Macでのレイアウト崩れに関してはある程度把握することができました。しかし今、それまでに表示されていた入力フォームが全く表示されなくなっていてしかもWindows機ですら表示が崩れています。なぜだかお分かりになりますか？Gitを使ったことが影響することはないですよね？<h:inputText>が表示されなくなっていて本当にわかりません。もしおわかりでしたらお教えください。なぜあのソースコードでは表示されないのでしょうか

gin

2016/10/31 04:39

憶測ですが、確認したのは組み込み前とかプログラム自体が動いていないということはないですか？

kei344

2016/10/31 04:50

<h:inputText>という要素はHTMLにありません。そのため、JSFの出力結果がどうなっているかを確認しないと問題の特定が出来ません。

anonyrabbit

2016/11/02 13:04

おそらくJSFが読み込まれていなかったと思われますね。遅くなって申し訳ありません。ありがとうございました。

行動規範の内容に同意します