html - 在 Internet Explorer 中重复背景图像

标签 html css internet-explorer-8

我正在尝试为表单内的按钮应用背景图像。该代码在所有浏览器(Chrome、FF、Opera 和 Safari)中都能正常工作并且看起来很完美。但是,在 IE8(我检查过的唯一版本)中,图像会重复出现。我正在尝试遵循标准和简单的 HTML 和 CSS,但这真的很烦人。请看下图

enter image description here

以下是HTML

<div id="header">
            <div id="TopHead">
                <div id="logo">
                    <a href="/" alt="eyaas">
                        <img src="logo.gif" alt="eyaas" />
                    </a>
                </div>
                <div id="country">India | Rest of the World
                </div>
                <div id="linksAndSearch">
                    <div id="linksTop">My Account | Login | Register | Cart
                    </div>
                    <div id="searchBar">
                        <form id="search_mini_form" action="" method="get" class="search"> 
                            <div class="searchBox"> 
                                    <input id="Text1" type="text" name="" class="searchBoxDefaultText jsSearchTerm jsToggle" value="" /> 
                            </div>
                            <div class="searchButton"> 
                                <button type="submit" title="" class="searchBoxSubmitButton" />
                            </div>
                            <div class="clear"></div> 
                        </form>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div id="TopNav">
            </div>
        </div>

下面是CSS

#linksAndSearch { float:left; }

.search { width:393px; height:35px; background-image:url('SearchBoxGrayFrameText.gif'); }

.searchBox { float:left; margin:6px 0 0 65px; background-image:url('SearchBoxFramed.gif'); width:275px; height:23px; overflow:hidden; }

.searchBox .searchBoxDefaultText { width:257px; height:19px; margin:2px 0 0 5px; font-size:15px; color:#CCC; }

.searchButton { float:left; margin:6px 0 0 10px; } 

.searchBoxSubmitButton { width:29px; height:23px; background-image:url( SearchSubmitBtnYellowArrow.gif); background-repeat:no-repeat; }

最佳答案

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

你推荐这个网站,我认为它可能对你有用,

关于html - 在 Internet Explorer 中重复背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10918510/

相关文章:

css - 2 个 CSS 文本 - 1 个电子邮件地址 - 我怎样才能将它们并排对齐?

python - 是否可以使用样式标签将 HTML 表格读入 Pandas ?

javascript - 如何从现有的 svg 创建 img

css - 在与位置 :relative? 相同的声明中,属性 top、left、right、bottom 是合法的

css - 覆盖背景图像时,是否同时下载了两个图像?

JQuery click() 在 ie8 中未触发

html - 使用 CSS 放大 div 并在单击时删除同一父级下的其他 div

python - Django:将表单数据转换为 'clean url'

javascript - 显示和列表样式属性在 IE8 中不起作用 - 这是兼容性问题吗?

jquery - Microsoft JScript 运行时错误 : Object doesn't support property or method 'slice' IE8 MVC