mania-ku

何か作りたいプログラマ未満。

【iOS8/Safari】aタグ内のimgにCSSのzoomが効かない

これはiOS8.0〜1OS8.2までの不具合です。
必要な時はjsで対応するしかなさそうですね。
画像を一気に50%表示するときに便利なんですが・・・

【:first-letter】1文字目が全角記号だとブラウザの挙動が違うのでまとめる

一文字目が全角記号で試してみたら、ブラウザによって挙動が違いました。
唯一思ったとおり(1文字目が赤字)になったのはIE7だけでした。

Chrome,Safari,IE8-11

  • ・「■,●,★」は思ったとおりの結果に
  • ・「・,※,.」は2文字目まで赤字になる

Firefox

  • ・「・,※,.」は2文字目まで赤字になる
  • ・「■,●,★」は無反応(何も赤くならない)

Firefoxでfirst-letterにバグがあるらしい

【iPhone】background-sizeがiOS7以降効いていない場合

background-sizeを使っている場所でiOS7以降で効いていないのは、backgroundのショートハンドがCSS3仕様対応したためです。
background-sizeプロパティを先に書いて、backgroudプロパティを後に書いているときなどに起こります。

参考:CSS3適合UA(iOS7等)に伴うbackground-sizeの指定順に注意|Web制作 W3G

【スマホ】selectのテキストは左右中央にできるのか?

できるのかな?とtext-align: center;を試しましたが、動かず。

ぐぐったらtext-align: -webkit-center;で左右中央にできるというのでやってみたけれど、iOS7・iOS8で効きませんでした。

bugfix

試行錯誤したら動きました!
※iPhoneと同じCSSだとAndroidで動かない(labelクリックしてもselectが開かない?)みたいです。

//HTML
<label>
    <select>
        <option>選択1だよ〜</option>
        <option>選択2だよ〜</option>
        <option>選択3だよ〜</option>
    </select>
</label>


//CSS
select { //Android
    text-align: center;
}

@media screen and (max-device-width: 480px) { //iPhone
    label {
        display: -webkit-box;
        display: box;
        box-pack:center;
        -webkit-box-pack:center;
        background-color: #fff;
        border: 1px solid #CCC;
        border-radius: 6px;
        cursor: pointer;
    }

    select {
        border: none;
    }
}

【Firefox】letter-spacingがnormalか0じゃないとリガチャが表示されない

Ligature Symbolsが好きでプライベートでよく使いますが、letter-spacingがnormalか0以外だとFirefoxではリガチャが表示されません。

参照:bug 5647 – [Cairo] letter-spacing が 0 でない場合、リガチャを使うべきでない

【Chrome】オートコンプリートのとき、背景を黄色にしないようにする方法3つ

Chromeでオートコンプリートのときに、標準では背景が黄色になります。
これをしない方法3つです。

CSSでの解決策

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px [背景にしたい色] inset;
}

HTMLでの解決策

<form autocomplete="off">
</form>
<input autocomplete="off">

jQueryでの解決策

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('input').attr('autocomplete', 'off');
}

【Safari】印刷できないGoogleMap

Safariで埋め込みのGoogleMapの印刷ができないものがありました。

GoogleMapを開いて右下の設定アイコンからの埋め込み:×

iframeで埋め込むタイプのもの。表示されず空白になります。

マイマップ:○

x見た目をカスタマイズしたりできるもの。
埋め込み方がわからなかったので、共有コードのeditをviewにしてiframeにつっこんでみたらできました。

//コード修正
https://mapsengine.google.com/map/edit?mid=zp9YOynKFddo.kkFqfEH-XKeU
↓
https://mapsengine.google.com/map/view?mid=zp9YOynKFddo.kkFqfEH-XKeU

Google Maps JavaScript API V3:○

jsを書くのが必要なもの。これはiframeじゃないみたいですね。

【IE7】aの中のspanがクリックできない

IE7でaの中のspanがクリックできないことがあります。状況としては下記のようなときです。

  • ・spanがdisplay: block;のときはクリックできない。
  • ・spanがdisplay: table-cell;(display: inline;zoom: 1;)のときはクリックできない。
  • ・spanがdisplay: inline;ではクリックできる。

解決策

aの外側をhasLayout: trueにし、spanをposition: relative;z-index: -1;にします。

display: block;のとき

/* HTML */
<ul class="clearfix">
    <li><a href="http://jsdo.it"><span class="pic"><img src="http://dummyimage.com/200x150/000/fff" alt=""></span><span>クリックできない</span></a></li>
</ul>
/* CSS */
li a span {
    display: block;
}
↓
li a span {
    position: relative;
    display: block;
    z-index: -1;
}

参考:IE7-/Win: Not clickable image in a link (caused by hasLayout)

display: table-cell;(display: inline;zoom: 1;)のとき

/* HTML */
<ul>
    <li><a href="http://jsdo.it/"><span><img src="http://dummyimage.com/50x50/000/fff" alt=""></span><span>クリックできない</span></a></li>    
</ul>
/* CSS */
li {
    margin-top: 5px;
    list-style: none;
}

li a span {
    display: table-cell;
    /display: inline;
    /zoom: 1;
    vertical-align: middle;
}
↓
li {
    margin-top: 5px;
    list-style: none;
    /zoom: 1;
}

li a span {
    position: relative;
    display: table-cell;
    /display: inline;
    /zoom: 1;
    vertical-align: middle;
    z-index: -1;
}

おまけ:display: block;のときにbugfixしてもクリックできないときは。

親にposition: relative;がかかっていないか調べてください。
※入ってないなぁと思ってもclearfixに含まれている場合もあります。

【Chrome】フォントサイズ大きい+太字だと、text-decoration: underline;が残る

Chromeでフォントサイズ大きい+太字だと、hover時text-decoration: none;にしてもunderlineっぽいものが残ってしまいます。
18pxから起きるようです。

【ブラウザ】jsを一時的に無効にする

検証で一時jsを無効にしたいときがあるので、その方法をメモ。

Firefox

検索窓にabout:configと入力してEnter。
検索にjavascript.enabledを入力して、
javascript.enabledを右クリックして、切り替えを押す。

※値がfalseならjsが無効、trueなら有効

参考サイト:Mozilla Re-Mix: Firefox 23でJavaScriptを無効にする方法。

Safari

開発>JavaScriptを無効を選択

Chrome

Chrome>環境設定(検索窓にchrome://settings)>プライバシー>コンテンツの設定>すべてのサイトに対して Javascript の実行を許可しないにチェック