[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>[HTML5/CSS3]ChromとFirefoxのdisplay: box;レンダリングの違い
[HTML5/CSS3]ChromとFirefoxのdisplay: box;レンダリングの違い
Firefoxのdisplay: box;はいろいろと問題があるみたいなんだけど、 並べられる要素にoverflow: hidden;を設定して中の要素にdisplay: box;を設定するとdisplay: box;が設定された要素の高さが無視されるって違いもあった。
言葉で書くとよくわからないのでコードを書くとこんな感じ。
HTML
- <div class="outer">
- <div class="contents">
- <h1>コンテンツ</h1>
- <p>overflow: hidden、display: box</p>
- <article class="index">
- <div><img src="/storage/codes/html5/display_box/img.jpg" /></div>
- <p>画像の説明</p>
- </article>
- </div>
- <div class="sidebar">
- <ul>
- <li>メニュー</li>
- </ul>
- </div>
- </div>
CSS
- .outer {
- width: 640px;
- padding: 16px;
- background: #333333;
- display: -webkit-box;
- display: -moz-box;
- display: -o-box;
- display: box;
- }
- .contents {
- width: 400px;
- margin-right: 20px;
- background: #FFFFFF;
- /* hiiden */
- overflow: hidden;
- }
- .contents article.index {
- width: 400px;
- border: 1px solid #CCCCCC;
- /* box */
- display: -webkit-box;
- display: -moz-box;
- display: -o-box;
- display: box;
- }
- .sidebar {
- width: 220px;
- background: #E9E9E9;
- }
outerをdisplay: box;としてコンテンツとサイドバーを並べる。コンテンツにoverflow: hidden;を設定して コンテンツの子要素(article)にdisplay: box;を設定するとarticleの高さが無視されるみたい。(確認したのはFirefox 10.0.2)
この場合、コンテンツの高さは見出しと文章だけとみなされて、サイドバーの高さで合わせられる。 chromの場合、articleの高さも含まれるみたいなので全て表示される。
articleのdisplay: box;を外すとコンテンツの高さに合わせられる。
コンテンツのoverflow: hidden;を外すとarticleの高さも計算される。
とまぁ解決策はあるし、こういう指定はすること無いと思うので特に困ることはないんだけど、動作としてはどちらが正しいんだろ？
| 投稿日 | 2012年3月13日 01:24 |
|---|---|
| カテゴリ | HTML/CSS |
| タグ | CSS3 | HTML5 | ブラウザ |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1284 |
コメント