左边距在所有浏览器中都有所不同？

[英]Left margin is different in all browsers?

本文翻译自 haansi 查看原文 2012/08/20 693 css/ html5/ html/ css3/ xhtml

Using CSS3 I am trying to display search box with glass image. I am doing it basically by placing a image on text box and setting its left-margin. My code is here:

使用CSS3我试图显示带有玻璃图像的搜索框。我基本上是通过在文本框上放置图像并设置其左边距来实现的。我的代码在这里:

<body>
    <form id="header-search">
        <input type="text" class="searchbox" /><input type="submit" class="button" value="" />
    </form>
</body>



#header-search{overflow:auto;}

#header-search input.searchbox 
{
    border-bottom-left-radius:5px;
    -webkit-border-bottom-left-radius:5px; 
    -moz-border-bottom-left-radius:5px;


    border-top-left-radius:5px;  
    -webkit-top-left-radius:5px; 
    -moz-left-radius:5px;

     border:1px solid #8e8e8e;

     background-color:white;
     height:16px;
     padding:4px;
     padding-left:28px;
     padding-right:10px;
     color:#4a4a4a;
     float:left;

 }

#header-search input.button{
    border:0px dashed red;
    padding:0;
    margin:0 0 0 -185px;
    width:24px;
    height:24px;
    background:transparent url(../images/SearchImage.png) center center  no-repeat;
    float:left;
}

UPDATE

I am not using em rather px

我不是用em而是px

I have tried different css reset.

我尝试过不同的css重置。

please see image for details difference.

请参阅图片了解详细信息。

I have done this code in new css/ html file where there is no other line of code.

我在新的css / html文件中完成了这段代码,其中没有其他代码行。

3 个解决方案

#1

Using position:absolute seems to be a more reliable approach for this kind of thing.

使用position:absolute似乎是一种更可靠的方法来处理这种事情。

HTML

<form id="header-search">
    <div class='relative'>
    <input type="text" class="searchbox" /><input type="submit" class="button" value="" />
    </div>
</form>

CSS

.relative {
  position:relative;
}
.relative .button {
  position:absolute; 
  left: 20px;
  z-index:1;
}

You may want to make this css more specific to this search input rather than all .button's etc

您可能希望使此css更具体地针对此搜索输入而不是所有.button等

#2

Its because you are not specifying a width of your search input box. If you do that, you method will work.

这是因为您没有指定搜索输入框的宽度。如果你这样做,你的方法将起作用。

Else, of course, the better way is to use position:absolute to position your button. This will ensure the layout across all browsers.

当然,更好的方法是使用position:absolute来定位你的按钮。这将确保所有浏览器的布局。

#3

If you want to place image for search input box , you can try this http://jsfiddle.net/HmKZQ/1/

如果你想为搜索输入框放置图像,你可以尝试这个http://jsfiddle.net/HmKZQ/1/

If you need the button for click then you can try this http://jsfiddle.net/HmKZQ/3/

如果您需要点击按钮,那么您可以试试这个http://jsfiddle.net/HmKZQ/3/

智能推荐

注意！

本站翻译的文章，版权归属于本站，未经许可禁止转摘，转摘请注明本文地址：http://www.silva-art.net/blog/2012/08/20/6f99b54616ec3102a292d516bffe33eb.html。

猜您在找

scrollIntoView在所有浏览器中都能工作吗? - Does scrollIntoView work in all browsers? 为什么这种行为（在所有浏览器上）具有margin-top？ - Why this behaviour (on ALL browsers) with margin-top? CSS Page-Break在所有浏览器中都不起作用 - CSS Page-Break Not Working in all Browsers 输入元素焦点，悬停和填充在所有浏览器中都不起作用 - Input element focus, hover and padding not behaving in all browsers 在所有类型的浏览器中都可以看到网页内容的界面？ - the interface to make the content of the web page viewable in all types of browsers?

赞助商链接