プログラミング css

11

HTMLページのすべての要素に最小フォントサイズを設定したいと思います。たとえば、フォントサイズが12px未満の要素がある場合、それらは12pxに変更されます。ただし、フォントサイズが12pxの要素がある場合、それらは変更されません。 CSSでそれを行う方法はありますか？

82 html css font-size

15

HTMLとCSSのプログレスバー

下の画像のようなプログレスバーを作成したいと思います。これを作成することについてはわかりません。HTML5テクニックを使用する必要がありますか？このプログレスバーの作成についてサポートをお願いします。

82 html css progress-bar

9

CSS移行中にWebkitテキストレンダリングの変更を防ぐ方法

CSSトランジションを使用して、CSS変換された状態間を遷移します（基本的には要素のスケールを遷移します）。要素が遷移しているとき、ページ上の残りのテキスト（Webkit内）は、遷移が完了するまでレンダリングをわずかに変更する傾向があることに気付きました。フィドル： http //jsfiddle.net/russelluresti/UeNFK/ 私はまた、これが私のヘッダーでは発生しないことに気づきました。 -webkit-font-smoothing: antialiasedプロパティと値のペアました。したがって、テキストをデフォルトの外観（フォントスムージングの「自動」値）に維持し、遷移中にレンダリングを変更しない方法はありますか？「auto」値を使用するようにテキストを明示的に設定しようとしましたが、何もしません。font-smoothingを「none」に設定すると、トランジション中にレンダリングが点滅するのを防ぐことにも注意してください。どんな助けでも大歓迎です。編集1 私はOSXを使用していることに注意してください。ParallelsのChromeでのテストを見ると、2つの異なる段落の動作が異なることがわかりませんでした。したがって、これはMacに固有の問題である可能性があります。

81 css webkit css-transitions css-transforms

12

「margin：0auto;」を使用する Internet Explorer8で

私はいくつかの高度なIE8テストを行っている最中ですが、IE8では古い使用方法margin: 0 auto;がすべての場合に機能するとは限らないようです。次のHTMLは、FF3、Opera、Safari、Chrome、IE7、およびIE8互換で中央揃えのボタンを提供しますが、IE8標準では提供しません。 <div style="height: 500px; width: 500px; background-color: Yellow;"> <input type="submit" style="display: block; margin: 0 auto;" /> </div> （回避策として、ボタンに明示的な幅を追加できます）。だから問題は：どのブラウザが正しいのか？それとも、これは動作が定義されていないケースの1つですか？（私の考えでは、すべてのブラウザーが正しくありません。「display：block」の場合、ボタンの幅を100％にするべきではありませんか？）更新：私は劣等生です。入力はブロックレベルの要素ではないので、「text-align：center」を使用してdiv内に含める必要があります。とはいえ、好奇心のために、上記の例でボタンを中央に配置するかどうかを知りたいと思います。恩恵のために：私は例で奇妙なことをしていることを知っています、そして私がアップデートで指摘するように、私はちょうどそれを中央に揃えるべきでした。賞金については、次のような仕様を参照してください。「display：block」を設定した場合、ボタンの幅は100％にする必要がありますか？それともこれは未定義ですか？表示はブロックなので、「margin：0auto;」にする必要があります。ボタンを中央に配置するかどうか、または未定義ですか？

81 html css internet-explorer-8

11

jQueryを使用してテキスト整列のスタイルを動的に追加する方法

CSS 2.1に関する通常のIEのバグを修正しようとしていますが、要素のスタイルプロパティを変更して、カスタムのテキスト配置スタイルを追加する方法が必要です。現在jQueryでは次のようなことができます $(this).width() or $(this).height() しかし、これと同じアプローチでテキストを変更する良い方法を見つけることができないようです。アイテムにはすでにクラスがあり、運が悪ければそのクラスにtext-alignを設定しました。クラスが定義された後、この要素にtext-align CSS属性を追加することは可能ですか？私はこのようなものを持っています $(this).css("text-align", "center"); 幅を調整した直後、これをFirebugで表示した後、スタイルに設定されているプロパティは「width」のみであることがわかります。何か助けはありますか？編集：おっと-この質問への大きな回答！手元の問題に関するもう少し詳細： jqGrid A3.5のjsソースを調整して、カスタムサブグリッド作業を実行しています。調整している実際のJSを以下に示します（上記の例で「this」を使用して申し訳ありませんが、これをシンプルに保ちたいと思いました。簡潔） var subGridJson = function(sjxml, sbid) { var tbl, trdiv, tddiv, result = "", i, cur, sgmap, dummy = document.createElement("table"); tbl = document.createElement("tbody"); $(dummy).attr({ cellSpacing: "0", cellPadding: "0", border: "0" }); trdiv = document.createElement("tr"); …

81 jquery css text-align

2

Firefoxで余分なボタンの間隔/パディングを削除します

このコード例を参照してください：http：//jsfiddle.net/Z2BMK/ Chrome / IE8は次のようになります Firefoxは次のようになります私のCSSは button { padding:0; background:#080; color:white; border:solid 2px; border-color: #0c0 #030 #030 #0c0; margin:0; } コードサンプルを変更して、両方のブラウザでボタンを同じにする方法を教えてください。JavaScriptベースのハイパーリンクはキーボードのスペースバーhrefでは機能せず、URLが必要であるため、JavaScriptベースのハイパーリンクを使用したくありません。 Firefox13以降の私の解決策 button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }

81 css firefox button spacing

13

ページを更新せずにWebサイトのCSSを更新する

CSSでページを作成しました。ここで、エディターからブラウザーに変更し、ページ全体を更新して、小さな変更をすべて確認する必要があります。しかし、アニメーションがあるので、ページを更新したくありません。では、CSSの更新後にサイトが自動的に更新されるように使用できるものはありますか？たぶんJavaScript、jQuery、Ajaxなどで？

81 javascript jquery html css ajax

7

CSSでテキストと選択ボックスを同じ幅に揃えますか？

わかりました、これを正しく行うことは一見不可能です。テキストボックスと選択ボックスがあります。左マージンと右マージンに揃うように、正確に同じ幅にしたいです。 <!DOCTYPE html> <html> <head> <style type="text/css"> input, select { width: 200px; } </style> </head> <body> <input type="text" value="ABC"><br> <select> <option>123</option> </select> </body> </html> そう思いますよね？いいえ。Firefoxでは選択ボックスが6px短くなっています。スクリーンショットを参照してください。では、コードを編集して2つのスタイルを作成しましょう。 <style type="text/css"> input { width: 200px; } select { width: 206px; } </style> うまくいきました！ちょっと待って、Chromeでもっとテストして... 誰かがこれらをすべてのブラウザに並べる方法を教えてもらえますか？幅：すべて200pxを実行できないのはなぜですか、すべてのブラウザで表示が異なるのはなぜですか？また、テキストボックスと選択ボックスの高さが異なるのはなぜですか？どうすれば同じ高さにできますか？高さとラインの高さを試しましたが、役に立ちません。解決：わかりました、私は以下の答えからいくつかの助けを借りて解決策を見つけました。重要なのは、box-sizing：border-boxプロパティを使用して、境界線とパディングを含む幅を指定することです。ここで優れた説明を参照してください。その後、ブラウザはそれを詰め込むことができません。コードは以下のとおりです。ボックスの高さも同じサイズに設定し、ボックス内のテキストをインデントして整列させています。また、Chromeには、配置を破棄する選択ボックスに使用する非常に奇妙な外観の境界線があるため、境界線を設定する必要があります。これは、HTML5サイト（IE9、Firefox、Chrome、Safari、Operaなどのサポートなど）で機能します。 <!DOCTYPE html> <html> <head> <style …

81 css html textbox drop-down-menu

7

ハイチャートチャートオプションbackgroundColor：IE8で黒を表示する「透明」

HighchartsbackgroundColor:'transparent'黒を表示するチャートオプションIE 8 histogram = new Highcharts.Chart({ chart: { renderTo: 'histogram', defaultSeriesType: 'bar', backgroundColor:'transparent' } これはI.E 9他では問題なく動作しますが、IE 8とSafariでは失敗します。理由は誰にもわかりませんか？

81 css internet-explorer-8 cross-browser highcharts

14

入力するとHTMLテキスト入力フィールドが大きくなりますか？

次のように、cssで初期テキスト入力サイズを設定できます。 width: 50px; しかし、たとえば200pxに達するまで、入力すると大きくなります。これはストレートcss、htmlで、できればjavascriptなしで実行できますか？もちろん、js / jqueryソリューションも投稿してください。ただし、これがなくても実行できる場合は、それはすばらしいことです。ここで私の試み： http://jsfiddle.net/jszjz/2/

81 javascript jquery html css

6

IEは疑似要素CSSを取り消しますか？

IEで動作するようにいくつかの疑似要素を取得しようとしていますが、それではうまくいきません。それはCSSを消し去り、そこにないように振る舞います、それはちょっと私を悪化させます。誰かが私が間違っていることを知っていますか？ .newbutton { border-radius: 50%; width: 74px; height: 74px; position: relative; background-color: black; margin: 60px 0px 25px 17px; overflow: visible; } .newbutton:before { content: "f"; width: 80px; height: 80px; position: absolute; border-radius: 50%; z-index: -1; top: 37px; left: 37px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation-name: fadecolor; -webkit-animation-duration: …

81 css internet-explorer ie-developer-tools

1

CSSピクセルを分数にすることはできますか？

CSSをpx分数にすることはできますか？規格で許可されていますか？もしそうなら、主要なブラウザはそれをサポートしていますか？皆さん、ドキュメントで答えをバックアップしましょう。

81 css w3c

7

jquery.animate（）を使用したCSSローテーションクロスブラウザ

クロスブラウザ互換のローテーション（ie9 +）の作成に取り組んでおり、jsfiddleに次のコードがあります $(document).ready(function () { DoRotate(30); AnimateRotate(30); }); function DoRotate(d) { $("#MyDiv1").css({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', '-o-transform':'rotate('+d+'deg)', '-ms-transform':'rotate('+d+'deg)', 'transform': 'rotate('+d+'deg)' }); } function AnimateRotate(d) { $("#MyDiv2").animate({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', '-o-transform':'rotate('+d+'deg)', '-ms-transform':'rotate('+d+'deg)', 'transform':'rotate('+d+'deg)' }, 1000); } CSSとHTMLは本当にシンプルで、デモ用です。 .SomeDiv{ width:50px; height:50px; margin:50px 50px; background-color: red;} <div id="MyDiv1" class="SomeDiv">test</div> <div id="MyDiv2" class="SomeDiv">test</div> 回転は使用.css()時に機能し.animate()ますが、使用時には機能しません。それはなぜですか、それを修正する方法はありますか？ありがとう。

81 jquery css rotation jquery-animate

7

jQuery .hide（）と.css（ "display"、 "none"）の違い

違いはありますか jQuery('#id').show() and jQuery('#id').css("display","block") そして jQuery('#id').hide() and jQuery('#id').css("display","none")

81 javascript jquery css

7

境界線を（div上で）崩壊させる方法は？

http://jsfiddle.net/R8eCr/1/のようなマークアップがあるとします。 <div class="container"> <div class="column"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="column"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="column"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> ... </div> 次にCSS .container { display: table; border-collapse: collapse; } .column { float: left; overflow: hidden; width: 120px; } .cell …

81 css

タグ付けされた質問 「css」

タグ付けされた質問「css」