iOSで文字列の最後の1文字だけ改行されてしまう不具合に遭遇したのでメモしておきます。 確認したiOSのバージョンは6.1.6です。 発生条件 調べてみると発生条件がいくつかあるみたいですが、今回遭遇した条件は以下になります。 display: inline-block;を指定している font-size: 20px;を指定している 文字列が全て全角文字 文字列の前に空白(半角スペースやコード上の改行)がある 上記発生条件の3・4番目について、いくつかパターンを試してみました。 HTML <!-- 文字列の前に半角スペースが入っていると発生 --> <div class="sample"> やる気マンゴスチンです</div> <!-- 半角スペースがない場合は発生しない --> <div class="sample">やる気マンゴスチンです </div> <div class="sampl
公開2015.08.07 更新2017.12.03 仕事・技術 Windows10が発売されて新ブラウザのEdgeが使えるようになっても、まだまだInternetExplorerの呪縛からは逃れられません;; 今回はフロートを使ったレイアウトではなく今後主流になってくる「フレキシブルボックス」でのレイアウトで発生した問題です。 以下のようなコードがあるとします。 <div id="flexParent"> <header>ヘッダー</header> <main> <div class="flexChild left">左</div> <div class="flexChild right">右</div> </main> <footer>フッター</footer> </div> よくあるカタチで、縦並びにヘッダー、メインコンテンツ(左右に2カラムあるとします)、フッターがあります。 これら
注)本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題(Safari) Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定(デフォ値なので、指定がなければそのままでOK) Safari10にて修正済み(つまり、SierraとiOS 10以降では対応不要) 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
馬刺し大好きな管理人がWeb制作で遭遇した バグや回避策などを記録していく日記です。 ご使用の際は自己責任で!!
IE で游ゴシック・游明朝を指定した時に IE で生じる謎の余白 いまだに、IE 11 のシェアが多いので、 この手のバグへの対策は、メンドー臭い。 IE の場合、「メイリオ」以外だと、line-height が効かなくなるバグもある。 単純な話、IE では、font-family の先頭で「メイリオ」フォントを指定しないとダメですね。 (同じ Microsoft でも Edge なら、メイリオ以外でも問題ない) 参考サイト 最近は、Windows と Mac で同じフォントにするため、「游ゴシック」を指定してるサイトもあるが、その場合は、IE だけメイリオにする CSS ハックした方がいいと思う。 例えば、font-family を ↓ このように指定してるなら、 body { font-family: "游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro
Shift_JIS(SJIS, cp932) の文字コードで、2byte目が0x5c の \ になっているものの俗称(だめ文字、駄目文字) 0x5cの \ は使用するフォントやロケールによりバックスラッシュまたは¥記号で表示されます。 ダメ文字を含む文字列やパス、ファイル名を処理する場合には文字化け、検索不可など様々な不具合が起きることがあります。 ダメ文字には ー ソ 十 表 など、使用頻度の高いものもあるので cp932を扱う場合には注意が必要です。 また広義には2byte目が 0x7c のパイプ文字 | になっている文字や、2byte目が正規表現などのメタ文字と重なる文字も含む場合もあります。 ダメ文字問題は正規表現をはじめとする様々な言語、システムで制御用のメタ文字として扱われる文字と同じバイト列が、SJISの漢字の2byte目に含まれていることにより起こります。 特に 0x5c
問題はどんな言語で書いても起こることですが、たまたま仕事でPHPつかってたときにぶつかったのでメモしておきます。 結論 HTTPのレスポンスヘッダで Content-Disposition: attachment; filename*=UTF-8''URLエンコードされたファイル名を送ってあげる。 追記 2017/11/02: Edgeでも通用するようです。https://github.com/netcommons/NetCommons2/issues/126 ファイル名が化ける PHPでファイルアップローダをつくっていました。 動作確認はUbuntu 14.04のFirefox30をつかっていましたが、社内ではIE11がデフォ。「一応やっとくか」とIE11で動かしたら、日本語のファイル名が見事に化けました。 またお前か、IE!チキショー Slim Frameworkをつかっているので、こ
おそらく架空のストーリ プログラマ「プログラムを更新しました」 テスター「いきなりエラーがでますよ!動作確認したんですか!」 プログラマ「え、私のところでは動くけど…、キャッシュクリアしました?」 テスター「キャッシュをクリアしたらエラーがでなくなりました」 テスター「でも、ユーザ全員にキャッシュをクリアさせるの?」 今日、JavaScriptやCSSの更新時にキャッシュから読ませない方法を知りました。 先人達は偉大すぎます。 <link href="common.css" rel="stylesheet" type="text/css"> この記述だとサーバ側の「common.css」を更新しても、 クライアント側のキャッシュの「common.css」が使用されて、 サーバ側の変更が反映されない可能性があります。 これをcssやjsにクエリー文字列を付加することで、 「common.cs
とある入力フォームを作った時の話ですが、送信ボタンを押しても一向に送信されず、原因をあれこれ探っていくと、Chromeのエラーコンソールに何やら出力されていました。 An invalid form control with name='foobar' is not focusable. そして、この問題になったフォームオブジェクトは<div style='display:none'>の中、つまりユーザーからは知覚も操作も不能な場所に置かれていて、そしてHTML5のバリデーション属性がかかっていました。 対策法 もちろん最初からこんなフォームを作ることはないとは思いますが、JavaScriptで制御しているとこのように「見えないコントロールがinvalidとなる」ということは発生してしまいます。対策法を検討してみる過程で、いろいろなものがありました。 novalidate、formnoval
これまでスマホサイトの対応をしてきた経験がある方ならご存知の、「電話番号っぽい数字の羅列が電話番号として勝手にリンクになってしまう」やつが、Edgeでも起きます。 実はこれ、IE11でもすでにそんな実装になっていたようなのですが・・・今まで作ってきて、そんな現象見たことありませんでした。 電話番号の形式の認識 実際に最近作ったWebページでも、IE11ではリンクにならずにEdgeだけリンクになったりしていました。 でもまあ、今後もこういったことが起きると思いますので、スマホ対応のときと同じように対策しておきましょう。 <meta name="format-detection" content="telephone=no"> HTMLのhead内にこの記述を仕込んでおきます。 これでオッケー☆⌒d(´∀`)ノ Windows10へのアップグレードが(強制的に)進んできて、クライアントでもWi
問題の現象 CGI 管理画面 ( admin/admin.cgi や admin/index.cgi ) にアクセスすると「500 Internal Server Error」 (インターナルサーバエラー、内部サーバエラー) が出る。 類似の現象 「403 Forbidden / 許可されていません」というエラーが出る場合はこちらを参照して下さい。 書き出したHTMLページにアクセスした時にこのエラーが出る場合はこちらを参照して下さい。 Windowsサーバ IIS (Internet Information Server) をお使いの場合でメッセージが「サーバ内部で障害が発生し、リクエストに応えることができませんでした」と表示される場合はこちらを参照して下さい。 今まで使えていたのにある日突然エラーが出るようになった場合はこちらもご参照下さい。 「すぐ使えるCMS」のCMS入力画面で画像
・エラー内容 [Could not find 'php-cs-fixer'. The program may not be installed.] atom php-cs-fixer で検索を掛けると、インストール方法や「php-cs-fixer.phar」にパスを通すなどやり方が色々あるが、いまいち設定方法がわからない・・・。 基本、Macのやり方しか載っていない? ■環境 Windows 参考サイト ■期待値 Windows環境でatomのatom-beautifyを使ってPHPソースコードを自動生成できる環境にしたい。 ■備考 cmdではapmのパスは通っています。 ■追記 Rubyなどの環境構築をしないと出来ない?
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く