在 Chrome 中工作,但在 IE 和 Firefox 中不起作用。 CSS/样式/HTML/PHP

发布于 2024-12-14 02:08:48 字数 5689 浏览 1 评论 0原文

我不知道如何解决这个恼人的问题。搜索和测试了很多,但没有任何效果。

好吧,我希望一切都像 Google Chrome 的第一张图片一样。在 IE 中,背景有所不同,标题不在中心。在 Firefox 中,这些框设置不正确。我想要每行 2 个盒子。

我不知道为什么会发生这种情况。

我不明白为什么 IE 仍然在网上可供下载。糟糕的浏览器

有人可以帮助我吗?

Chrome:

在此处输入图像描述

Firefox:

在此处输入图像描述

IE

在此处输入图像描述

在这里您可以看到index.php

HTML/PHP

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<title>-</title>

<style type="text/css">
/*<![CDATA[*/
#title{color:red; padding-bottom: 240px; padding-left: 25px;}
#desc{color:blue; padding-bottom: 135px; padding-left: 5px;}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
 div.c1 {width: 953px}
/*]]>*/
</style>
</head>

<body>
    <div class="header navpos c1" id="nav">
            <table summary="header" border="0">
                <tr>
                    <td>
                        <ul>
                            <li class="home"><a href="index.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="about"><a href="manage.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="contact"><a href="contact.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="twitter"><a href="index.html"><img src="includes/images/f_logo.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="facebook"><a href="index.html"><img src="includes/images/t_logo.png" alt="link to Syndicate Plus Twitter" /></a></li>
                        </ul>
                    </td>
                </tr>
            </table>
    </div>
    <div class="box c1">
        <?php while($products = mysql_fetch_array($result)) {?>
        <table style="float: left;" width="473" align="left" background="includes/images/box.gif" width="473" height="285">
            <tr>
                <td width="35%" height="100%" id="title"><?php echo $products['products'];?></td>
                <td width="70%" height="100%" id="desc"><?php echo $products['description'];?></td>
            </tr>
        </table>
    <?php
    }       
    ?>
    </div>
    <div class="footer"></div>
</body>
</html>

在这里你可以看到样式.css CSS***

* {
margin : 0;
padding : 0;
}
html {
background-image : url(images/web_bg.png);
}
body {
width : 953px;
margin : auto;
}
img {
border : 0;
}
A:link {
text-decoration : none;
color : #0087dc;
}
A:visited {
text-decoration : none;
color : #0087dc;
}
A:hover {
text-decoration : none;
color : #0087dc;
}
a:active, a:focus {
outline : 0;
}
a {
outline : none;
}
.header {
background-image : url(images/header_bg.png);
width : 953px;
margin : auto;
}
.footer {
background-image : url(images/bot_new.png);
min-height : 229px;
max-height : 229px;
position: relative;
}
#nav {
float : left;
}
#nav li {
float : left;
list-style-type : none;
}
#nav .home a {
margin-left : -20px;
margin-top : 25px;
display : block;
background-image : url(images/header_home.png);
background-repeat : no-repeat;
width : 400px;
height : 54px;
}
#nav .about a {
margin-left : 300px;
margin-top : 30px;
display : block;
background-image : url(images/header_about.png);
background-repeat : no-repeat;
width : 64px;
height : 13px;
}
#nav .contact a {
margin-left : 20px;
margin-top : 30px;
display : block;
background-image : url(images/header_contact.png);
background-repeat : no-repeat;
width : 64px;
height : 13px;
}
#nav .twitter a {
margin-left : 40px;
margin-top : 30px;
display : block;
background-image : url(images/t_logo.png);
background-repeat : no-repeat;
width : 26px;
height : 26px;
}
#nav .facebook a {
margin-left : 5px;
margin-top : 30px;
display : block;
background-image : url(images/f_logo.png);
background-repeat : no-repeat;
width : 26px;
height : 26px;
}
#nav .home a:hover {
margin-left : -20px;
margin-top : 25px;
background : url(images/header_home_light.png);
background-repeat : no-repeat;
width : 400px;
height : 54px;
}
#nav .about a:hover {
margin-left : 300px;
margin-top : 30px;
background : url(images/header_about_light.png);
background-repeat : no-repeat;
width : 64px;
height : 13px;
}
#nav .contact a:hover {
margin-left : 20px;
margin-top : 30px;
background : url(images/header_contact_light.png);
background-repeat : no-repeat;
width : 64px;
height : 13px;
}

I can't figure out how to fix this annoying problem. Searched and tested a lot but nothing works.

Well, I want everything to look like the first image Google Chrome. In I.E. the background is different, the header is not in the center. In Firefox the boxes are not set correctly. I want 2 boxes in every row.

I don't know why this is happening.

I don't get why I.E. is still on the web for download.. Terrible browser

Can someone help me out?

Chrome:

enter image description here

Firefox:

enter image description here

I.E.

enter image description here

Here you can see index.php

HTML/PHP

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<title>-</title>

<style type="text/css">
/*<![CDATA[*/
#title{color:red; padding-bottom: 240px; padding-left: 25px;}
#desc{color:blue; padding-bottom: 135px; padding-left: 5px;}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
 div.c1 {width: 953px}
/*]]>*/
</style>
</head>

<body>
    <div class="header navpos c1" id="nav">
            <table summary="header" border="0">
                <tr>
                    <td>
                        <ul>
                            <li class="home"><a href="index.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="about"><a href="manage.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="contact"><a href="contact.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="twitter"><a href="index.html"><img src="includes/images/f_logo.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="facebook"><a href="index.html"><img src="includes/images/t_logo.png" alt="link to Syndicate Plus Twitter" /></a></li>
                        </ul>
                    </td>
                </tr>
            </table>
    </div>
    <div class="box c1">
        <?php while($products = mysql_fetch_array($result)) {?>
        <table style="float: left;" width="473" align="left" background="includes/images/box.gif" width="473" height="285">
            <tr>
                <td width="35%" height="100%" id="title"><?php echo $products['products'];?></td>
                <td width="70%" height="100%" id="desc"><?php echo $products['description'];?></td>
            </tr>
        </table>
    <?php
    }       
    ?>
    </div>
    <div class="footer"></div>
</body>
</html>

Here you can see style.css
CSS***

* {
margin : 0;
padding : 0;
}
html {
background-image : url(images/web_bg.png);
}
body {
width : 953px;
margin : auto;
}
img {
border : 0;
}
A:link {
text-decoration : none;
color : #0087dc;
}
A:visited {
text-decoration : none;
color : #0087dc;
}
A:hover {
text-decoration : none;
color : #0087dc;
}
a:active, a:focus {
outline : 0;
}
a {
outline : none;
}
.header {
background-image : url(images/header_bg.png);
width : 953px;
margin : auto;
}
.footer {
background-image : url(images/bot_new.png);
min-height : 229px;
max-height : 229px;
position: relative;
}
#nav {
float : left;
}
#nav li {
float : left;
list-style-type : none;
}
#nav .home a {
margin-left : -20px;
margin-top : 25px;
display : block;
background-image : url(images/header_home.png);
background-repeat : no-repeat;
width : 400px;
height : 54px;
}
#nav .about a {
margin-left : 300px;
margin-top : 30px;
display : block;
background-image : url(images/header_about.png);
background-repeat : no-repeat;
width : 64px;
height : 13px;
}
#nav .contact a {
margin-left : 20px;
margin-top : 30px;
display : block;
background-image : url(images/header_contact.png);
background-repeat : no-repeat;
width : 64px;
height : 13px;
}
#nav .twitter a {
margin-left : 40px;
margin-top : 30px;
display : block;
background-image : url(images/t_logo.png);
background-repeat : no-repeat;
width : 26px;
height : 26px;
}
#nav .facebook a {
margin-left : 5px;
margin-top : 30px;
display : block;
background-image : url(images/f_logo.png);
background-repeat : no-repeat;
width : 26px;
height : 26px;
}
#nav .home a:hover {
margin-left : -20px;
margin-top : 25px;
background : url(images/header_home_light.png);
background-repeat : no-repeat;
width : 400px;
height : 54px;
}
#nav .about a:hover {
margin-left : 300px;
margin-top : 30px;
background : url(images/header_about_light.png);
background-repeat : no-repeat;
width : 64px;
height : 13px;
}
#nav .contact a:hover {
margin-left : 20px;
margin-top : 30px;
background : url(images/header_contact_light.png);
background-repeat : no-repeat;
width : 64px;
height : 13px;
}

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

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

发布评论

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

评论(3

〆凄凉。 2024-12-21 02:08:48

将页眉、内容和页脚包裹在宽度恒定的

中,以在某个时刻强制显示下一行。

<body>
<div id="wrapper">
  <div id="header">header</div>
  <div id="content">
      <script type="text/javascript">
        for (i=0;i<5;i++) { // example in javascript
          document.write("<div style='float:left;width:80px;height:80px;background-color:blue;margin:2px;'></div>");
        }
      </script>
  </div>     
  <div id="footer">footer</div>    
</div>
</body>

CSS:

body {
   text-align:center;
}
#wrapper {
    background-color:#eee;
    width:300px;
    margin: 0 auto;
    text-align:left;
}
#header {
    background-color:red;
}
#content {
}
#footer {
    clear:both;
    background-color:green;
}

工作代码&结果: http://jsfiddle.net/fsHd5/3/

Wrap the header, content and footer in a <div> of constant width to force the next line at some point.

<body>
<div id="wrapper">
  <div id="header">header</div>
  <div id="content">
      <script type="text/javascript">
        for (i=0;i<5;i++) { // example in javascript
          document.write("<div style='float:left;width:80px;height:80px;background-color:blue;margin:2px;'></div>");
        }
      </script>
  </div>     
  <div id="footer">footer</div>    
</div>
</body>

CSS:

body {
   text-align:center;
}
#wrapper {
    background-color:#eee;
    width:300px;
    margin: 0 auto;
    text-align:left;
}
#header {
    background-color:red;
}
#content {
}
#footer {
    clear:both;
    background-color:green;
}

Working code & result: http://jsfiddle.net/fsHd5/3/

來不及說愛妳 2024-12-21 02:08:48

对于您的 IE 问题,您告诉 #nav 向左浮动。没有真正的必要。我假设您打算将其应用于子元素。 IE 确实存在背景仅扩展到内容高度的问题。除了明确设置高度的有点棘手的解决方案之外,我没有解决这个问题。

在 Firefox 中,它不会强制规定正文的宽度,因此请在其周围使用 div 来强制宽度达到您想要的宽度。

For your IE problem, you're telling #nav to float left. There is no real need for that. I assume you were intending to apply it to the child elements. IE does have an issue with backgrounds only expanding to the height of the content. Other than the kinda-hacky solution of setting a height explicitly, I have no fix for that.

In firefox it's not enforcing the width of the body, so use a div around it to force the width to what you want.

默嘫て 2024-12-21 02:08:48

尝试 display: inline-block;

不确定,因为尚未测试。

Try display: inline-block;

Not sure as not tested.

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