-6

我正在尝试制作一个谷歌搜索框，并且为此设计了一个代码。但是我有一个问题导致css在firefox chrome和IE以外的其他浏览器上运行......那我该怎么办？

这是代码：

Abulkas 平板电脑 

       #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 “hack”

于 2012-10-20T18:47:49.450 回答
0

IE 不支持box-shadow。

为了解决这个问题，我建议使用css3Pie。

另外，我不认为 IE9 需要前缀 for background-size，所以我不相信你需要-ms-background-size. IE8 根本不支持background-size，不管任何前缀。如果你想在 IE8 中支持它，试试这个 jquery hack：https ://github.com/louisremi/jquery.backgroundSize.js

顺便说一句： CanIUse.com是帮助确定任何特定浏览器支持哪些功能的好网站。

希望有帮助。

于 2012-10-20T19:19:15.847 回答