mania-ku

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

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

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

Chrome,Safari,IE8-11

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

Firefox

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

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

【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に含まれている場合もあります。

【Custom Scrollbar plugin】カスタムスクロールバー中のareaがスムーズスクロールしちゃう

Custom Scrollbar pluginのバージョン2.8.3を使ったカスタムスクロールバー中にareaがあると、クリックしたときにページ最下部へのスムーズスクロールになってしまいます。

bugfix

jquery.mCustomScrollbar.js内のareaの記述を削除します。
でもtextareaのほうは消さないように気をつけてください。そうすると直ります。

【IE】隣接したarea移動時にマウスオーバーが途切れないようにする

以下のようなHTMLとjQueryのとき、mapにareaが複数あると隣接していてもIEでは移動時にmouseoutとmouseoverが起きてしまいます。

<!--html-->
<img src="http://jsrun.it/assets/o/l/f/d/olfdl.gif" alt="" usemap="#link"><!--画像-->
<map name="link">
    <area shape="rect" coords="0,0,137,100" href="http://google.co.jp" alt="Google"><!--area1-->
    <area shape="rect" coords="138,0,275,100" href="http://yahoo.co.jp" alt="Yahoo"><!--area2-->
</map>
//js
$('map').hover(function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,0.3);
},function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,1);
});

解決策

jQueryの動作の前に.stop()を追加します。

$('map').hover(function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,0.3);
},function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,1);
});

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

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

【Firefox】画像をfadeすると、画像の大きさが変になる

jQueryのfadeを行うと、Firefoxで画像の大きさが変になることがあります。
マウスオーバーのときになるみたいで変にガタガタします。
CSSだけで直るので、サクッと修正しちゃいましょう。

修正方法

fadeさせる画像にbox-shadowを指定します。

img {
    box-shadow: #000 0 0 0;
}

参照:JQuery fadeIn fadeOut image difference 1px in FireFox – Stack Overflow

IE7以下に対応する

CSSで直す場合、そのまま使うとIE7以下ではfadeが効かない不具合があるので、CSSハックで対応します。

img, x:-moz-any-link, x:default {
    box-shadow: #000 0 0 0;
}

【CSS】IE7でネイティブ(マイナス)マージンの部分が切れる

IE7でネイティブ(マイナス)マージンを使うと、背景が切れるというのはよく聞くし実感します。
が、今回起きたのは、ボーダーが途中で切れる・・・

これも対処方法は背景と一緒で、

zoom: 1;

で直ります。

zoomはいろいろ役に立ってくれるので、嬉しいですね!
他だと画像の下にテキストが回り込むのを直したい時なんかに使ったりします。

ovarflow: auto;
zoom: 1;