我正在将 Kartris 用于电子商务网站。在除 IE7 之外的所有浏览器中看起来都很棒。 有问题的页面是: http://mellcrest.thecalicotree.co.uk/kartris/Default.aspx ?
以下元素都显示异常,搜索框根本不显示。
<user:NavigationMenu ID="UC_NavigationMenu" runat="server" EnableViewState="False" />
<user:SearchBox runat="server" ID="UC_SearchBox" />
导航菜单的 CSS 是:
#section_searchbox
{
background-color:#5e99d2;
height: 23px;
background-image: url(images/menu_back.jpg);
background-repeat: repeat-x;
border-bottom: solid 1px #01366A;
border-top: solid 1px #01366A;
position:relative;
z-index:1;
}
#section_searchbox #searchprogress
{
padding: 0 0 0 0;
background-color:#5e99d2;
}
#section_searchbox #searchboxes
{
position: relative;
padding: 2px 7px 1px 7px;
float: left;
background-color:#5e99d2;
background-image: url(images/menu_back.jpg);
background-repeat: repeat-x;
}
#section_searchbox #searchboxes input
{
width: 200px;
}
#section_searchbox #searchboxes input.button
{
width: 50px;
}
#section_searchbox #searchboxes input.button:focus
{
border: 0px;
}
最佳答案
在 </head>
结束之前添加此脚本标签:
<!--[if IE 7]>
<style type="text/css">
/* Fixes the display of the menu */
#header {
height:113px;
}
/* Fixes the search box display */
#menubar {
width: 640px;
}
/* Fixes the display of boxes in rows
(IE7 doesn't understand display: inline-block)
*/
.slideshow, .slideshow2, .slideshow3, .slideshow4, .slideshow5, .slideshow6 {
float: left;
}
/* Fixes the animation transition */
.slideshow a, .slideshow2 a, .slideshow3 a, .slideshow4 a, .slideshow5 a, .slideshow6 a {
height: 233px;
width: 233px;
}
/* Fixes the focus of the searchbox. */
#searchboxes {
position: relative;
z-index: 100;
}
</style>
<![endif]-->
它解决了大部分显示问题。
对我来说,菜单和标题的显示方式(在我的 IETester 中)与最近的浏览器(我与 chrome 进行比较)相同。
关于css - IE7 CSS 渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8473758/