Vivaldi で onbeforeunload が効かない : (*x).b=z->a+y/c
◆ 1.14 だと とどまる を押してもアラートが出続けるだけで閉じるのをキャンセルできなかった ◆ 1.15 で直ってた ◆ ページの移動やリロードでアラートが出ずに移動してしまうのは 1.15 も変わらず 今回は久々に地味に困るバグを見つけました 戻れない beforeunloadJavaScript で window.addEventListener("beforeunload", eve => {eve.returnValue = ""}) を実行して beforeunload を設定すると ページを閉じようとした時や別ページに移動しようとしたときにアラートが出て本当に移動していいか確認してくれます 入力中に間違って移動することを防いでくれる便利機能です それが Vivaldi だと ページ移動だと何も起きない閉じるとアラートはできるけど離れるしかできない となってます 閉じた場合
zoomを使うとlist-style-typeがおかしくなる
こんばんわ、おひさしぶりです。 溝上です。 なんだかひさしぶりにブログを書く気がします。 そんなわけで今回は軽くリハビリがてら、 最近遭遇したIEのバグについてお話したいと思います。 それでは早速サンプルをご覧ください。 ▼スクリーンショット ※スクリーンショットは、Windows Internet Explorer 6.0のものです。残念です。 （htmlコーディング） <ol class="number"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> </ol> <ol class="alphabet"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> </ol> （cssサンプル） li{ zoom:1; } ol { margin-le
border-collapse:collapse;にするべきか separateにするべきか at softelメモ
HTMLにて、tableに下記のスタイルを指定すると、CSSの見た感じがわかりやすく簡単で、レンダリングもきれいにできているように見えます。 table {border-collapse:collapse;} td, th {border:1px solid #000000;} border-collapse:collapse; の指定は、境界線の共有。 1pxの境界線を共有するということは、計算上隣接するセル同士で0.5pxずつ受け持つことになります。 この指定によって、Firefoxで上の境界線、左の境界線が消える、期待する位置から1pxずれるといった問題が発生します。 ★ ★ ★ こちらをおすすめします。 ★ ★ ★（IE6非対応。CSSハック入りは下に追記。） table { border-collapse: separate; border-spacing:0; empty-ce
IE6・IE7でできちゃうチェックボックスの周りにできる余白を消す方法 - MemoClip
こんにちは。 先日、フォームを作っていて「ぬ？」と思ったので記事にします。 お問い合わせや登録フォームなどで使うことのあるチェックボックス。 普通に作ると、こういうソースになりますよね。 <form method="" action=""> <input type="checkbox" id="c1" /><label for="c1">チェックボックス</label> </form>で、分かりやすいように、cssでこのように装飾するとします。 input { vertical-align:middle; margin:0; padding:0; background-color:#F90; } form { background:#cccccc; border:1px solid #666666; margin:0; padding:0; }こうすると、以下のような表示になります。 IE
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
iPhone、iPod touchなどでフォントサイズが変わる対応方法 – ヒビヅレ
最近ではスマートフォン対策されたサイトが増えてきており、自分もスマホ対策を行ってます。 そんなスマホ対応していてiPhone（正確にはiPod touch）で確認してみたら特定のエリアだけ文字サイズが妙に大きくなっている現象があり、ちょっと（実際にはかなり）ハマったので備忘録的メモ。 メディアクエリを使ってウィンドウサイズによってスタイルシートを分けてるんですが、PC環境とiPhoneを縦で見ると問題ないのに何故か横にした時だけフォントが大きくなるという現象が発生。 cssを色々書き換えてもどうしても直らずレイアウトから変えなきゃいかんのか…と悩んでいたら、どうやらiPhoneでは自動でフォントサイズを調整してくれる機能があるらしいです。で、それを解除するにはCSSのbodyにでも以下を加えるだけ。 -webkit-text-size-adjust: none; これで無事解決。 でもAn
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-
![[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker
iOSのSafariでなぜか特定のfont-size（11px、10px、9px）のときだけマルチバイトの幅計算がおかしいのか、折り返し位置がずれるという件。 DEMO これをiPhoneで見るとこんな感じになる。 こんな感じ。11px、10px、9pxのときに右側に隙間が空いてるがわかると思います。これは特にpaddingとかとってるわけではなくて、このfont-sizeのときだけなぜか隙間が空くんです。8pxは大丈夫なので11px以下というわけではないみたい。さらにマルチバイトでなければ隙間はできない。謎。 ちなみにiOS4.3でも直ってなかった。Androidは大丈夫。 解決方法知ってる人がいたら教えてほしい。 追記：letter-spacing: -0.001em; で直るっぽい
IE6のバグのまとめ - Webtech Walker
XHTML+CSSでコーディングするときにブラウザのバグを知っているか知らないかでは大きく違いますよね。とりわけ他のブラウザよりバグが多いIE6さんのバグをまとめてみることにしました。そろそろIE7の自動配布が始まるころなので忘れないうちにということで。 とは言ったもののIE6のバグを改めて見てみると多い･･･多すぎるよ！逆にこれだけのブラウザがあるからこそコーダーという職種がある気さえしてきます。 今回は『CSSバグ辞典スレッド』の要約のWinIE CSSバグリストからIE6のバグを抜き出して自分でわかりやすいように種類わけしてみました。これで全てではないですがこれだけ知ってればかなりのケースで対応できると思います。 2012/07/31 追記: リンク先がなくなったのでリンクを外して一覧だけ残しときます。 ちなみにこの種類分けも厳密ではないのであしからず。 ボックスモデル maring
Binbo-Special－技術資料－JavaScript－onloadイベントの呼び出しがhistory.backとかの時にブラウザ毎に挙動違うのが気になったので軽く調査
※1 ラジオボタンは妙な動作をするブラウザがあります！！！ ラジオボタンに、checked="checked" を入れている場合、何故だか良く分かりませんが、checked以前の要素のラジオボタンにチェックした場合、戻る及び進むでページを表示した時にチェックが残らない！という現象が見られました。 すみません、説明下手ですね。 つまりこんな感じです。 パターン1： 2つめのラジオボタンがcheckedで、1つめのラジオボタンをクリックしてPage2へ。 そしてブラウザの戻るでPage1へ パターン2： 2つめのラジオボタンがcheckedで、2つめ以降（下図では3つめ）のラジオボタンをクリックしてPage2へ。 そしてブラウザの戻るでPage1へ ちなみに、こんな動きになってしまうブラウザは、 Chrome です。 それ以外のブラウザは、checkedがあっても、戻る・進む時
Win版IE6でdocument.body.scrollTopが常時0のバグ？（仕様らしい）｜JavaScriptプログラムメモ｜プログラムメモ
Win版IE6で DOCTYPEが <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> の時に document.body.scrollTopの値が常に【0】になる仕様があるみたい。 回避策としては ============================================= if ( document.compatMode == 'CSS1Compat'){ nowY=document.documentElement.scrollTop; } else{ nowY=document.body.scrollTop; } =============================================
Opera9.5で罫線が消えるスタイルシート(CSS)のバグ対処法
このところ連日、バカみたいにHTMLとCSSばかり書いてます(笑) 数十個のテンプレートを作成中で、できるだけ多くのブラウザに対応させようと、WindowsはIEの5.5以上7まで、Firefoxは2と3、あとOperaとSafariの最新版で表示確認を行っています。いわゆるモダンブラウザですね。 その中で、最近9.51になったOperaで、罫線が消えるというバグに遭遇しました。それまで使っていた9.2Xでは発生していなかったと記憶してますが、ブラウザをスクロールして同じ位置に戻すと、スクロールして隠れた部分の罫線が消えている、というバグです。 そして消えた状態で他のタグに移動したり、他のソフトを見たりして、要するに一度Operaの画面を隠してまた表示させると、罫線が戻っています。そしてスクロールするとまた罫線が消えるんです(^^; 古いIEでも似たようなバグがありました。IEでは確か背景
【javascript】こちら( http://css-happylife.com/template/14/ )のjavascriptでロールオーバー実装したのですが、 firefoxのブラウザの戻るボタンでページを戻…
【javascript】こちら( http://css-happylife.com/template/14/ )のjavascriptでロールオーバー実装したのですが、 firefoxのブラウザの戻るボタンでページを戻った状態で、 ボタン画像がロールオーバーの画像のままになってしまいます。 ※htmlソースのメタ情報でブラウザキャッシュを指定してみたのですがダメでした。 javascript内でこれを解除する方法を教えて下さい。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
