当前位置： 文江博客话题详情

请帮忙 - IE8 上的 CSS 宽度问题

发布于 2024-08-22 20:09:25 字数 4704 浏览 5 评论 0原文

我对网站开发非常陌生，对 HTML 或 CSS 不太了解。不过，我确实知道我从托管站点选择使用的模板在 IE8 上有问题，但我不知道如何修复它。页面文本所在的主要内容框稍微偏左而不是居中。我不知道如何让它与页面上的其他边框相匹配。

有人可以告诉我如何修复网站上的宽度和整体页面尺寸吗？

网站：PineBarrensAnimals.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
   <meta http-equiv="content-type" content="{%MetaCharset%}" />
   <meta name="description" content="{%MetaDescription%}" />
   <meta name="keywords" content="{%MetaKeywords%}" />
   <title>{%MetaTitle%}</title>
    <style>
   html, body {
height: 100%;
padding-top:10px;
margin:10px;
}
body {
background: #3F3F3F url("images/tile.jpg");
background-position: top center;
font-family: "Arial";
font-size: 11px;
color:#FFFFFF;
padding:0px;
margin:0px;
}
a, a:link {
text-decoration: underline;
color:#FFF;
}
a:hover {
text-decoration: none;
color:#FFF;
}
a:active {
text-decoration: underline;
color:#FFF;
}

#container {
width: 774px;
height: auto !important;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom:0px;
}

#core_header {
width: 762px;;
height: 302px;
background: url(images/header.gif);
margin:0px;
padding:0px;
position:relative;
left:7px;
}

#header_text
{
position:relative;
right:420px;
top:40px;
font-size:16pt;
float:right;
font-weight:bold;
}

#header_text span {
   font-size: 12pt;
   }

img
{
margin:5px;
}

#core_left {
margin: 0;
width: 774px;
height:auto;
}
#core_right {
margin: 0;
float: left;
width:750px;
min-height:100%;
height:auto !important;
height:100%;
background: #4D7942;
color:#000;
margin-left:10px;
border-left: 4px solid #FFF;
border-right: 4px solid #FFF;
}

.content-box
{

padding:6px;
height:auto !important;
float:left;
width: 720px;
margin-bottom:10px;
font-family: "Arial";
font-size: 11px;
color:#FFF;
margin-left:10px;
}
.tumb
{
float: left;
margin-right:5px;
padding:0px;
}

.pagination
{
margin-left:auto;
margin-right:auto;
text-align:center;
}

#footer {
width:758px;
background:  url(images/footer.gif) bottom center no-repeat;
text-align: center;
margin-left:auto;
margin-right:auto;
padding:0px;
height:26px;
clear:both;
position:relative;
left:2px;
}

#footer2
{
clear:both;
height:10px;
background: url(images/footer.jpg);
width:758px;
margin-left:10px;
}


h2
{
font-family: "Verdana", Lucida Handwriting, sans-serif;
font-size:18px;
height:25px;
}
h3
{
font-family: "Verdana", Lucida Handwriting, sans-serif;
font-size:15px;
height:22px;
margin:0px;
padding:0px;
color:#FFF;
width:718px;
background: url(images/content_header.jpg) bottom left repeat-x;
margin-bottom:5px;
font-weight:bold;
}
h4
{
font-family: "Verdana", Lucida Handwriting, sans-serif;
font-size:12px;
}


#navcontainer li {
color:#FFF;
display:inline;
position:relative;
height:25px;
width:100px;
padding-left: 55px;
padding-top:20px;
top:19px;
}

#navcontainer ul {
margin:0px;
padding: 0px;
padding-top: 0px;
padding-left: 0px;
width: 774px;
list-style-type: none;
background: url("images/menu_bg.gif");
height:60px;
}
#navcontainer a, #navcontainer a:visited {
display:inline;
color:#FFF;
text-decoration: none;
font-family:Arial;
font-size:13px;

}
#navcontainer a:hover {
margin:0px;
color:#FFF;
text-decoration: none;
border-bottom:2px solid #FFF;


}
div#sth {
   text-align: center;
   padding-top: 10px;
   }

div#sth span {
   margin: 0 auto;
   }
   </style>

      <!--[if IE]>
     <style type="text/css">

     #footer
     {
      left:1px; 
     }

     #core_right
     {
      height:300px;
      margin-left:5px;
     }
     .content-box
     {
      margin-left:5px;
     }

     </style>
     <![endif]-->

   </head>




<body>
<div id="container">
<div id="core_header">
<div id="header_text">{%WebsiteName%}<br /><span>{%WebsiteSlogan%}</span></div>
</div>
<div id="core_container">
<div id="core_container2">
<div id="core_left">
<div id="navcontainer">
<ul>
{%menu_start=1%}
<li><a href="{%menu_href%}">{%menu_display%}</a></li>
{%menu_end=1%} 
</ul>
</div>
</div>
<div id="core_right"><!-- Your content goes here -->
<div class="content-box">
<h3>{%name%}</h3>
{%content%}</div>
<!-- End of content --></div>
</div>
<div id="footer2">&nbsp;</div>
</div>
</div>
<div id="footer">&nbsp;</div>
<div id="sth"><span>{%WebsiteFooter%}</span></div>
<br />
</body>
</html>

谢谢， - 丹尼·B

原文

I'm very new to website development, and don't know much about HTML or CSS. I do know however that the template that I've chosen to use from my hosting site is problematic on IE8, but I don't know how to fix it. The main content box where the page's text goes is slightly more to the left than centered. I don't know how to get it to match the other borders on the page.

Can someone please tell me how I can fix the width and overall page dimensions on my website?

Website: PineBarrensAnimals.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
   <meta http-equiv="content-type" content="{%MetaCharset%}" />
   <meta name="description" content="{%MetaDescription%}" />
   <meta name="keywords" content="{%MetaKeywords%}" />
   <title>{%MetaTitle%}</title>
    <style>
   html, body {
height: 100%;
padding-top:10px;
margin:10px;
}
body {
background: #3F3F3F url("images/tile.jpg");
background-position: top center;
font-family: "Arial";
font-size: 11px;
color:#FFFFFF;
padding:0px;
margin:0px;
}
a, a:link {
text-decoration: underline;
color:#FFF;
}
a:hover {
text-decoration: none;
color:#FFF;
}
a:active {
text-decoration: underline;
color:#FFF;
}

#container {
width: 774px;
height: auto !important;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom:0px;
}

#core_header {
width: 762px;;
height: 302px;
background: url(images/header.gif);
margin:0px;
padding:0px;
position:relative;
left:7px;
}

#header_text
{
position:relative;
right:420px;
top:40px;
font-size:16pt;
float:right;
font-weight:bold;
}

#header_text span {
   font-size: 12pt;
   }

img
{
margin:5px;
}

#core_left {
margin: 0;
width: 774px;
height:auto;
}
#core_right {
margin: 0;
float: left;
width:750px;
min-height:100%;
height:auto !important;
height:100%;
background: #4D7942;
color:#000;
margin-left:10px;
border-left: 4px solid #FFF;
border-right: 4px solid #FFF;
}

.content-box
{

padding:6px;
height:auto !important;
float:left;
width: 720px;
margin-bottom:10px;
font-family: "Arial";
font-size: 11px;
color:#FFF;
margin-left:10px;
}
.tumb
{
float: left;
margin-right:5px;
padding:0px;
}

.pagination
{
margin-left:auto;
margin-right:auto;
text-align:center;
}

#footer {
width:758px;
background:  url(images/footer.gif) bottom center no-repeat;
text-align: center;
margin-left:auto;
margin-right:auto;
padding:0px;
height:26px;
clear:both;
position:relative;
left:2px;
}

#footer2
{
clear:both;
height:10px;
background: url(images/footer.jpg);
width:758px;
margin-left:10px;
}


h2
{
font-family: "Verdana", Lucida Handwriting, sans-serif;
font-size:18px;
height:25px;
}
h3
{
font-family: "Verdana", Lucida Handwriting, sans-serif;
font-size:15px;
height:22px;
margin:0px;
padding:0px;
color:#FFF;
width:718px;
background: url(images/content_header.jpg) bottom left repeat-x;
margin-bottom:5px;
font-weight:bold;
}
h4
{
font-family: "Verdana", Lucida Handwriting, sans-serif;
font-size:12px;
}


#navcontainer li {
color:#FFF;
display:inline;
position:relative;
height:25px;
width:100px;
padding-left: 55px;
padding-top:20px;
top:19px;
}

#navcontainer ul {
margin:0px;
padding: 0px;
padding-top: 0px;
padding-left: 0px;
width: 774px;
list-style-type: none;
background: url("images/menu_bg.gif");
height:60px;
}
#navcontainer a, #navcontainer a:visited {
display:inline;
color:#FFF;
text-decoration: none;
font-family:Arial;
font-size:13px;

}
#navcontainer a:hover {
margin:0px;
color:#FFF;
text-decoration: none;
border-bottom:2px solid #FFF;


}
div#sth {
   text-align: center;
   padding-top: 10px;
   }

div#sth span {
   margin: 0 auto;
   }
   </style>

      <!--[if IE]>
     <style type="text/css">

     #footer
     {
      left:1px; 
     }

     #core_right
     {
      height:300px;
      margin-left:5px;
     }
     .content-box
     {
      margin-left:5px;
     }

     </style>
     <![endif]-->

   </head>




<body>
<div id="container">
<div id="core_header">
<div id="header_text">{%WebsiteName%}<br /><span>{%WebsiteSlogan%}</span></div>
</div>
<div id="core_container">
<div id="core_container2">
<div id="core_left">
<div id="navcontainer">
<ul>
{%menu_start=1%}
<li><a href="{%menu_href%}">{%menu_display%}</a></li>
{%menu_end=1%} 
</ul>
</div>
</div>
<div id="core_right"><!-- Your content goes here -->
<div class="content-box">
<h3>{%name%}</h3>
{%content%}</div>
<!-- End of content --></div>
</div>
<div id="footer2"> </div>
</div>
</div>
<div id="footer"> </div>
<div id="sth"><span>{%WebsiteFooter%}</span></div>
<br />
</body>
</html>

Thank you,
- Danny B

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

古镇旧梦 2024-08-29 20:09:25

这应该是标准 Web 调试的情况：

首先，您需要一个 DOM 检查器（并且知道如何使用它）。

然后，您需要从站点中删除各种格式，直到达到仍然显示问题的最低限度。

希望最小版本能够使问题变得明显。
如果没有，请在此处发布 HTML 代码的最小版本，我们会查看。

但这里很少有人愿意深入研究代码中所有不相关的部分。

编辑通过反复试验，我这样修复了它：

在第一个#core_right中，将WIDTH更改为758。

在第二个#core_right（[如果是 IE] 内）中，将 MARGIN-LEFT 更改为 10。

我认为这样就可以了。

This should be a case of standard web debugging:

First, you need a DOM inspector (and know how to use it).

Then you need to remove various formatting from your site until you are down to the minimum that still shows the problem.

Hopefully a minimal version should make the problem apparent.
If not, post a minimal version of your HTML code here, and we'll take a look.

But few people here want to dig through all the irrelevant parts of your code.

EDIT Through trial and error, I fixed it this way:

In the first #core_right, changed WIDTH to 758.

In the second #core_right (within [if IE]), changed MARGIN-LEFT to 10.

I think that does it.

回复 原文
拔了角的鹿 2024-08-29 20:09:25

尝试更改此行：

<!--[if IE]>

To

<!--[if lt IE 8]>

问题在于添加到该条件块中的右侧面板和页脚的边距。 IE 8 不需要它们，但我猜 IE 7 需要。

Try changing this line:

<!--[if IE]>

To

<!--[if lt IE 8]>

The problem is with the margins added to the the right panel and footer in that conditional block. IE 8 doesn't need them, but I'm guessing IE 7 does.

回复 原文
一片旧的回忆 2024-08-29 20:09:25

在此块中，

 <!--[if IE]>
     <style type="text/css">

     #footer
     {
      left:1px; 
     }

     #core_right
     {
      height:300px;
      margin-left:5px;
     }
     .content-box
     {
      margin-left:5px;
     }

     </style>
     <![endif]-->

删除 core_right 中的 margin-left: 5px 和 left: 1px，您应该在那里，虽然我不能说它是否会在所有浏览器中或仅在 IE8 中（使用 IETester 与其他人核实。）

In this block

 <!--[if IE]>
     <style type="text/css">

     #footer
     {
      left:1px; 
     }

     #core_right
     {
      height:300px;
      margin-left:5px;
     }
     .content-box
     {
      margin-left:5px;
     }

     </style>
     <![endif]-->

remove the margin-left: 5px in core_right and the left: 1px and you should be there, although I can't say whether it'll be in all browsers or just IE8 (Use IETester to check with the others.)

回复 原文
星軌x 2024-08-29 20:09:25

我想对大家说声谢谢。

我使用了以下2个技巧：

1）在第一个#core_right中，将WIDTH更改为758。2

In the second #core_right (within [if IE]), changed MARGIN-LEFT to 10.

）
我

<!--[if lt IE 8]>

在 IE 8、Safari 和 Firefox 上尝试了该网站，现在看起来不错。

  • 丹尼·B.

I want to say thank you to everyone.

I used the following 2 tips:

1) In the first #core_right, changed WIDTH to 758.

In the second #core_right (within [if IE]), changed MARGIN-LEFT to 10.

2)
To

<!--[if lt IE 8]>

I tried the website on IE 8, Safari, and Firefox and it looks fine now.

  • Danny B.
回复 原文
看轻我的陪伴 2024-08-29 20:09:25

如果“div#core_right”的左边距是 10 像素，而不是 5 像素，那么它在 IE8 中看起来会很好。

If "div#core_right" had a 10px left-margin, instead of a 5px, it would look fine in IE8.

回复 原文
~没有更多了~

关于作者

り繁华旳梦境

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文