Question

我正在尝试制作一个谷歌搜索框，我已经设计了一个代码。但是我有一个问题导致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>

Answer 1

可以找到IE的

box-shadow“hack”here

Answer 2

IE不支持box-shadow。

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

此外，我认为IE9不需要background-size的前缀，因此我认为您不需要-ms-background-size。 IE8根本不支持background-size，无论任何前缀如何。如果你想在IE8中支持它，试试这个jquery hack：https://github.com/louisremi/jquery.backgroundSize.js

顺便说一下：CanIUse.com是一个很好的网站，可帮助您了解任何特定浏览器支持哪些功能。

希望有所帮助。

CSS不适用于IE

2 个答案: