-6

Google 検索ボックスを作成しようとしていますが、そのためのコードを設計しました。しかし、Firefox chrome や IE 以外の他のブラウザで css を実行する際に問題が発生しました。

これはコードです：

アブルカス錠 

       #outerContainer{
         width: 350px;
         height: 60px;
         border-radius: 10px;
         box-shadow: 0 0 5px 1px #888;
         display: block;
       }
       .buttonwithimg
             {
             background: url(google-g-logo-2012.png) no-repeat;
             cursor:pointer;
                         border: none;
             }


       .googleButton{
         position: relative;
         left: 5px;

         width: 40px;
         height:50px;
       }

       #srchBox{
         border-radius: 3px;
         margin-left: 8px;
         height: 50px;
         width:200px;
         margin-top: 5px;
       }
       .otherButton{
         width:43px;
         height: 50px;
         .background { width:150px; height:150px; padding:3px; background-image:
 url(andro-view-tools/Transform-galaxy-s2-to-galaxy-s3.jpg); border:
 1px solid black; /* Safari and Chrome */
 -webkit-background-size: 190% 160%;

 /* Firefox */
 -moz-background-size: 190% 160%;

 /* Internet Explorer */
 -ms-background-size: 190% 160%;

 /* Opera */
 -o-background-size: 190% 160%;

 /* CSS3 */ background-size: 190% 160%; }
      }

     </style>
     <div class="background">
        &nbsp;<div id="outerContainer" style="width: 342px; height: 63px">
         &nbsp;&nbsp;<button class="buttonwithimg" style="width: 59px; height: 57px">;
 </button><input id="srchBox" type="search">    
 <button>class="otherButton" style="width: 59px; height: 52px">Search</button>
     </div>
        </div>   </body> </html>
4

2 に答える 2

3

IE 用の box-shadow の「ハック」は、ここにあります。

于 2012-10-20T18:47:49.450 に答える
0

IE はサポートしていませんbox-shadow。

これを支援するために、css3Pieを使用することをお勧めします。

さらに、IE9 は のプレフィックスを必要としないと思うbackground-sizeので、必要ないと思います-ms-background-size。background-sizeプレフィックスに関係なく、IE8 はまったくサポートしていません。IE8 でサポートしたい場合は、次の jquery ハックを試してください: https://github.com/louisremi/jquery.backgroundSize.js

ところで、特定のブラウザでサポートされている機能を調べるのに役立つサイトとして、CanIUse.comがあります。

それが役立つことを願っています。

于 2012-10-20T19:19:15.847 に答える