タグ

CSSバグに関するkiyokichiのブックマーク (13)

  • Firefox でテーブルの線(border)が表示されたりされなかったりする件の対策。

    Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基スタンス。 btmup Blog 珍しく Firefox のバグです(だと思います)。 あえて「解決法」ではなく「対策」としたのは、解決したかどうか定かではないからです。 つまり、「よく分からんけど、とりあえずうまくいってるっぽい」と。 発生した現象はタイトルの通りですが、テーブルに設定した線が、Firefox で見てみると表示されたりされなかったりするのです。 「されたりされなかったり」とは言っても、表示のたびに結果が変わるということではなく、再現性はあります。 ただ、文字サイズを変えたり行間を変えたりパディングを変えたりすると、表示される線と表示されない線が違ったりするということです。 色々な数値を微調整していけばすべての線がちゃんと表示されるポイントがあるかも知れませんが、環境が異なればまた

    Firefox でテーブルの線(border)が表示されたりされなかったりする件の対策。
    kiyokichi
    kiyokichi 2012/04/02
    firefoxにしては珍しい・・・。rowspanしてると最後のセルでborderがおかしくなるようで、border-collapse:collapse;だと回避できないっぽい。
  • css-eblog.com - このウェブサイトは販売用です! - css eblog リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    kiyokichi
    kiyokichi 2011/02/18
    もうほんとにIEは(ry ちなみに検証したところ、<div id="A"></div> <div id="B"></div>の場合、Bの中or終わりにコメントがあってもOKだけど、Aの終わり(</div><!-- -->)orBのはじめ(<!-- --><div id="B">)にコメントがあるとNGみたい。
  • XHTMLのコメントもセレクタ対象?(:first-childが効かない-IE7-) - Probationer M's Labo

    この現象はまだお目にかかったことはなかったのだが、今後「:first-child」を使う機械も増えると思い載せておくことにしました。しかも現在では対処方法がないとのことです。知ってるか知らないかの違いで、対処法を探し無駄に時間を費やすと思うとぞっとします。 IE7にXHTMLのコメントもセレクタの対象として扱うというバグがあるそうです。 まずは現象を見てもらうのが手っ取り早いので、下のサンプルをIE7とFirefoxで見比べてみて下さい。 XTHMLの記述 <div> <p>1つ目の段落</p> <p>2つ目の段落</p> </div> <div> <!--コメント--> <p>1つ目の段落</p> <p>2つ目の段落</p> </div> CSSの記述 p:first-child{ color: #FFF; background-color:#F86C18;

    kiyokichi
    kiyokichi 2011/01/27
    inlineにしたliのli:first-childがIE7で効かない…なんで?と思ったらコメント(余白を削るためのアレ)を1つ目のタグと誤認する様子。かなりうんこ仕様。
  • リストを横に並べてそれぞれを改行しないようにすると WebKit では全体が改行されない | 石輪っぷり! | 有限会社 Willさんいん

    このページの位置 ホーム > blogっぷり! > 石輪っぷり! > Web制作 > リストを横に並べてそれぞれを改行しないようにすると WebKit では全体が改行されない リスト要素を横に並べる方法として、float: left; を使う方法と、display: inline; を使う方法がありますが、それぞれに癖があります。 float: left; を使うとリスト全体が左配置になりますので、リスト全体を中央揃えにしたい場合には使えません。 一方、display: inline; を使う場合、各リストの間におよそ半角スペース1個分の間隔が空くため、各リストの間に縦線を入れようとする場合など、左右の余白を調節する必要があるのですが、これが厄介なことに Internet Explorer 7 以前では間隔が空く側が逆なのです。 この間隔は HTML で一つ一つのリスト要素が改行されてい

    kiyokichi
    kiyokichi 2010/10/14
     display:inline;してる横並び<li>にwhite-space:nowrap;してると改行されずに一直線する罠。ブラウザだと出ないんだけどiPhoneだとafter部分に余白でるのは何なの?仕様なの?
  • Selectボックスでフォントが明朝体になってしまうIEのバグ [IE,IE6,IE7,バグ] - BlurBlue-Note

    select > option要素内に"┏"などの太い罫線記号を使うとなぜかIEでは明朝体になってしまいます。 意味がわかりません。 症状 確認した限りではIE6、IE7にて、下図のように太罫線記号を頭に入れると明朝体になります。 IEでの表示。3の倍数だけアホ(バグ)になってます。 実際にバグが発生するコード HTML <p><select name="" size="9"> <option value="1"> ┏いっこめ</option> <option value="2"> ┣にこめ</option> <option value="3">┣さんこめ</option> <option value="4"> ┣よんこめ</option> <option value="5"> ┣ごこめ</option> <option value="6">┣ろっこめ</option> <option v

    kiyokichi
    kiyokichi 2009/02/05
     まじありえんwwwwww何このどうでもいい仕様wwwwww
  • [CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス

    CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>

  • フロートとネガティブマージンまとめ:CSS | Tech de Go

    kiyokichi
    kiyokichi 2008/04/16
     *CSS IE6 hasLayoutとか
  • CSSの簡易バグリスト | check*pad.jp

    /--------------- WindowsMac -------------/ 【Win/Mac NN】position:relative内に配置したabsolute要素の位置基準が、親BOX(relative)ではなくbodyになってしまう。(relativeを入れ子にすると一番親にあたるrelativeBOXの位置が基準になる) /--------------- Windows -------------/ 【Win IE】同一要素内にwidthとpaddingを指定すると、ボックスの下部に隙間ができる(widthとpaddingを同一要素内で指定しない) 【Win IE】floatを指定したBOXにmarginの左右を指定すると、指定した値の2倍がmarginとして適用されてしまう(paddingで回避 or floatを指定した同一BOXにmarginを指定しない) 【Wi

  • IEでのCSSのバグを回避するhasLayout | コリス

    IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値(read-only) false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ

    kiyokichi
    kiyokichi 2007/11/21
     hasLayoutの値をtrueにするには。「display:inline-block」「zoom:1;」「width指定」「height:1%」など。
  • [CSS]気をつけたいIE 7のバグ -CSS-Discuss

    CSS-Discussにアップされている「IE 7 Bugs」の意訳です。 省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意: バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。 公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグ フォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。 相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。 例: body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。 キーワード指定でのサイズ フォントサイズに「small

    [CSS]気をつけたいIE 7のバグ -CSS-Discuss
  • CSS_XHTML_TIPS:CSS-TIPS CSSで背景画像位置調整に関するNetscapeバグ

    年度末の慌しさの最中、ホームサイトのリニューアルを強行していました。各ブラウザでのレンダリングチェックをしていて、NN.7においてCSSで背景画像の位置(画像参照)が大きく乱れていました。 ソースでは バグのあったソース <ul> <li> 〜省略〜 <a class="external" href="http://www.adobe.com/jp/" >Adobe 旧Macromedia</a></li> </ul> a.external { padding-right: 35px; text-decoration: none; background-image: url(img.png); background-repeat: no-repeat; background-position: right 30%; } ググって見ても、どうにも糸口がみつからず、一晩

    kiyokichi
    kiyokichi 2007/10/01
     *CSS *バグ *Netscape7 背景画像 li 非表示
  • floatした際に背景が消える件【css tip】

    floatした際に背景が消える件【css tip】 親ボックスに背景を適用して、内包する子ボックスに対してfloatを適用した場合、IEでは子ボックスを内包する形で背景が表示されるのに対して、Firefoxでは親ボックスの背景が表示されなくなります。 サンプルとなるhtmlは <div class="parent"> 親ボックス <div class="child"> 子ボックス </div> <div class="child"> 子ボックス </div> </div> とします。 これに対して div.parent{ width:204px; background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } このようなCSSを適用した場合、以下のような表示に

    floatした際に背景が消える件【css tip】
    kiyokichi
    kiyokichi 2007/09/26
     *CSS *clear float 背景 バグ FireFox IE Opera
  • lepracaun.info

    kiyokichi
    kiyokichi 2007/09/26
     *CSS *clear FireFox 画像 下余白 バグ
  • 1