- ベストアンサー
box-shadowの質問です。
box-shadow: -webkit-box-shadow: -moz-box-shadow: chome Firefox opera safari はつくのですが でシャドウを付けているのですがIEだけがシャドウがつきません。 どうすればIEもシャドウがつくのでしょうか？ よろしくお願いします。
- fewewfewcf
- お礼率17% (10/57)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- IE9とbox-shadowの質問です。
box-shadow: -webkit-box-shadow: -moz-box-shadow: で「chome」 「Firefox」 「opera safari」 はつくのですが 「Internet Explorer 9」だけがシャドウがつきません。 どうすれば「IE9」もシャドウがつくのでしょうか？ HTML CSSは素人なので 分かりやすく教えていただけるとありがたいです。 よろしくお願いします。
- ベストアンサー
- HTML
- cssのボタンについて（IEで背景が表示されない）
リンク先を表示するためにcssでボタンを以下のように作製しました。 FireFoxでは正常にきちんと表示されるものの、 IE10で確認したところ、IEでは背景色が表示されませんでした。 そこでzoom: 1;などを足すなどしてみたのですが やはり表示されません。どうしたらいいのかご指南いただけませんか？ どうかよろしくお願いいたします。 a.btn { position: relative; background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 2px solid #FFF; color: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); text-shadow: 0px 0px 3px rgba(0,0,0,0.5); padding: 10px 10px; margin: 4px 2px 4px 2px; ｝
- ベストアンサー
- CSS
- CSS グラデーションが反映されない
DreamWeaverでサイトを制作しています。 下記のように書いてもブラウザ上にグラデーションが反映されないのですが、 どういった原因が考えられるのでしょうか？ #header{ color:#fff; background-color:#F60; moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4); /* For WebKit (Safari, Google Chrome etc) */ background:-webkit- gradient(linear, top, bottom, from(#f60), color-stop(0.3,#C30), to(#fff)); /* For Mozilla/Gecko (Firefox etc) */ background: -moz- linear-gradient(-45deg, #f60, #fff); /* For Internet Explorer 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F06000, endColorstr=#FFFFFFFF); /* For Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)"; } フォントについてやbox-shadow等は反映されるのですが、グラデーションだけが。。 宜しくお願いします。
- ベストアンサー
- HTML
- CSS3で三角形の描画にシャドウをつけると
CSS3で三角形を作って、シャドウをつけると 三角の下に四角い影がついてしまうのですが、これはどうにもならないのでしょうか？ "▲"の下に"□"こんな感じで影が付きます。 ソースは以下のとおりです。 width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; -moz-box-shadow:0 0 3px #cccccc; -webkit-box-shadow:0 0 3px #cccccc; box-shadow:0 0 3px #cccccc; アドバイスお願いします。
- ベストアンサー
- HTML
- カラム落ちの対処法について
独学でＨＴＭＬ５とＣＳＳ３を勉強中で、教本を読みながら以下のようなＣＳＳを書いたところ、Ｆｉｒｅｆｏｘ、Chrome、Ｓａｆａriではきちんと描画しますが、ＩＥ９とOperaではカラム落ちしてしまいます。 横幅の合計も間違っていないと思いますし、数値を減らしても変わりません。 本によるとIE9は対応しているようなんですが、「flote」で書かないとダメなのでしょうか。 それと、ベンダープレフィックスの書き方ですが、「プロパティ」と「値」のところのどちらに書くのが正しいのでしょうか、それともどちらでも構わないのでしょうか。 本によって異なるので。 #contentwrapper { width: 980px; display:-webkit-box; display:-moz-box; display:-o-box; display:-ms-box; display:box; } #box01 { border: solid 1px; margin: 4px 0px; padding: 8px; width: 760px; box-sizing: -webkit-border-box; box-sizing: -moz-border-box; box-sizing: -o-border-box; box-sizing: -ms-border-box; box-sizing: border-box; } #box02 { border: solid 1px; margin: 4px 0px 4px 10px; padding: 6px; width: 210px; box-sizing: -webkit-border-box; box-sizing: -moz-border-box; box-sizing: -o-border-box; box-sizing: -ms-border-box; box-sizing: border-box; } 以上、２点の回答宜しくお願い致します。
- 締切済み
- CSS
- FirefoxとOperaがCSSを勝手に補完
<input type=text style=width:0> このようなinput要素にwidth:0というstyleを付加した小さなドキュメントを用意し、 Firefox(5)やOpera（11.50)で見ると、勝手にwidthを1pxに書き換えられます。 IE9,Safari(5.1),Iron(11)では同様の現象は確認できませんでした。 しかし、仕様の犬であるFirefoxやOperaがやることが間違っているとは思えないのです。 訳のわからないハックを使った解決は望んではいません。 FirefoxやOperaが正しいとわかるソース、あるいはIE9やWebkit系ブラウザが正しいとわかるソースをください。 ご存じの方おられましたら、よろしくお願いします。
- ベストアンサー
- HTML
- IEのbox-shadow（CSS3 PIE）が…
CSS3 PIEを使ってIEにbox-shadowをコンテナ全体に施したところ、フッター以下部分の影を含めて画面に表示されてしまいました。 希望としては添付画像の波線以下の部分は画面に表示させずに、フッターを画面最下部にするようにしたいのですが、、、どうしたらいいのでしょうか？ 全体の縦幅をIEだけ-30pxにしたいのです。 分かりにくい日本語で申し訳ありません、何と説明したらいいのかが自分でも分かっていなくて・・・。
- 締切済み
- HTML
- monacaで使うcssの釦の色を変えたい
現在monacaのiOSのアプリ作成の練習しています。掲載したようなボタンのCSSを並べてみました。 <a class="button--large" href="mentenance_index.html">テスト1</a> <a class="button--large" href="mentenance_index.html">テスト2</a> <a class="button--large" href="mentenance_index.html">テスト3</a> このときにこのボタンの色を変えたいと思うのですが、 "css/style.css" このファイルのbutton--largeクラスのどの部分を修正すれば色は変わりますでしょうか？ ちなみに、 .button--large { .....（中略）...... background-color: #1284ff; .....（中略）...... } この部分だと自分は思い、 background-color: #00008b; というダークブルーのような設定に変更してiphoneでデバッグしてみたのですが、色が変わってくれませんでした。 この button02--large クラスの内容も掲載させて頂きます。 どうぞ、ご教示の程よろしくお願い致します。 .button--large { text-align: center; position: relative; display: inline-block; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 0; margin: 0; font: inherit; color: inherit; background: transparent; border: none; font-family: 'Helvetica Neue', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: auto; text-decoration: none; padding: 4px 20px; font-size: 16px; line-height: 36px; letter-spacing: 0; color: #fff; text-shadow: 0 1px none; vertical-align: middle; background-color: #1284ff; -webkit-box-shadow: none; box-shadow: none; border: none; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; -moz-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; -o-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; font-weight: 400; font-size: 16px; font-weight: 500; line-height: 36px; padding: 4px 20px; display: block; width: 100%; } .button--large:active { background-color: #1284ff; -webkit-box-shadow: none; box-shadow: none; color: #fff; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; opacity: 0.6; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .button--large:disabled { opacity: 0.3; cursor: default; pointer-events: none; } .button--large:hover { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .button--large:focus { -webkit-box-shadow: none; box-shadow: none; outline: 0; }
- ベストアンサー
- CSS
- ３番目のBoxだけずれる
CSSとHTMLは以下の様に幅などを注意して書いたつもりで、微妙にそれぞれの幅などを調整しても、三番目だけが、なぜか下にずれちゃいます。何か勘違いしているようにも思いますが、原因を教えてください。 単に二個だとうまく行くんですけどね。 よろしくお願いします。 HTML <div id="mainR1"> <div id="box1" > box1 </div> <div id="box2" > box2 </div> <div id="box3" > box3 </div> </div> CSS #mainR1 { float: left; width: 480; background-color: #ffffff; border: dotted 1px #9d9d9d; } #box1{ float: left; width: 138; height: 138; background-color: #ffcfff; border: dotted 1px #9d9d9d; -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; } #box2{ margin-left: 160; width: 138; height: 138; background-color: #ffffff; border: dotted 1px #9d9d9d; -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; } #box3{ float: right; width: 138; height: 138; background-color: #ffcfff; border: dotted 1px #9d9d9d; -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; }
- ベストアンサー
- CSS
- IE10でのbox-sizingの書き方
IE10で、box-sizing:border-boxが効かなくて困ってます。 例えば、以下のようなソースのhtmlを書いた場合です。 <!DOCTYPE html> <html> <head> <style type="text/css"> *{ margin: 0px; } html, body{ height: 100%; width:100%; } #container{ padding-bottom: 24px; height: 100%; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #box{ height:100%; width:100%; background-color: blue; } </style> </head> <body> <div id="container"> <div id="box"> </div> </div> </body> </html> 以上のように書くと、chromeやSafariでは、blueの#boxの下側に24pxの隙間ができて、border-boxが効いているのがわかるのですが、IE10では、隙間が出来ません。 いろいろボックスの位置とか変えて試しましたが、IE10でbox-sizingが効くことがない様子だったので、根本的にbox-sizingの書き方が間違ってるのか、他に何か大事な設定が抜けているのか、それとも仕様変更があったのか、わからないのです。 ネットで調べても、それらしい答えは見当たりませんでした。 どなたか、ご教授願います。
- ベストアンサー
- CSS
