-1

我在css3中将部分标签与左侧对齐，将标签右侧对齐。它在谷歌浏览器中工作。但它在 Firefox 和 Internet Explorer 中不起作用。有人能说出为什么不起作用。这里是html5代码

<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="urf-8" />
<title>Bruno Website </title>
<link rel="stylesheet" href="main.css" >
</head>

<body>
    <div id=big_wrapper>
    <header id="top_header">
       <h1> Welcome to HTML5 </h1>
    </header>

    <nav id="top_menu">
        <ul>
            <li>Home</li>
            <li>Services</li>  
            <li>Tutorials</li>  
            <li>Conatct</li>        
        </ul>
    </nav>

    <div id="new_div">
    <section id="main_section">
        <article>
            <header>
                <hgroup>
                <h1>Tiltle of the article</h1>
                <h2>titile h2 </h2>
                </hgroup>
            </header>
                <p>This is my First Website in hTml5 </p>
            <footer>
                 <p>~BRuno thileeban</p>
            </footer>
        </article>
        <article>
            <header>
                <hgroup>
                <h1>Tiltle of the article2</h1>
                <h2>titile h2 2 </h2>
                </hgroup>
            </header>
                <p>This is my First Website in hTml5 2 </p>
            <footer>
                <p>~BRuno thileeban</p>
            </footer>
        </article>
    </section>
        <aside id="side_news">
            <h4>News</h4>
            HEllo we r doing good job
        </aside>
    </div>
    <footer id="the_footer">
    Copyright Bruno .....
    </footer>

    </div>
</body>

</html>

这是css3代码

*
{ 
margin:0px;
padding:0px;
}
h1
{
 font: bold 20px Tahoma;
}
h2
{
font: bold 14px Tahoma;
}
header, section, footer, aside, nav, article, hgroup{ display:block;}
body
{
 width:100%;
 display:-webkit-box;
 -webkit-box-pack: center;
}
#big_wrapper{
 max-width: 1000px;
 margin:20px 0px;
 display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex:1;
}
#top_header { background:yellow;
border:3px solid black;
padding:20px;
}
#top_menu{ border:red;
background:blue;
color:white;
}
#top_menu li { 
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px tahoma;
 }
 #new_div{ 
  display:-webkit-box;
  -webkit-box-orient:horizontal;
  }
  #main_section
  {
  border:1px solid blue;
  -webkit-box-flex:1;
  margin:20px ;
  padding:20px;

  }

  #side_news{
    border:1px solid red;
    margin:20px 0px;
    padding:30px;
    background: #66CCCC;

  }
  #the_footer{
  text-align:center;

   padding:20px;
   border-top:2px solid green;
  }
  article{ background:#FFFBCC; border:1px solid red; padding:20px; margin-bottom:15px;}
  article footer{ text-align:right;}
4

4 回答 4

1

您已选择在您的代码中仅支持webkit（Google Chrome 所基于的）。要支持其他浏览器使用的渲染引擎，您需要进行一些更改。

在您使用的任何地方-webkit-*，复制该行和下面的 use -moz-*，再次使用-o-*and -ms-*，然后再一次不带任何前缀。网络浏览器将丢弃它不理解的那些。

例如，-webkit-box-flex:1;变成

-webkit-box-flex:1; /* chrome, safari, etc */
-moz-box-flex:1;    /* Firefox, seamonkey etc */
-o-box-flex:1;      /* Opera */
-ms-box-flex:1;     /* MSIE */
box-flex:1;         /* Any that support full implementation */

但是，应该注意的是，这是原始 CSS 灵活框布局模块标准的属性，正在被新标准取代。您可能有兴趣flex改用

于 2012-10-26T11:35:01.903 回答
0

您在 CSS 中使用了多个-webkit前缀（例如：-webkit-box-orient: vertical;）。这些规范仅适用于某些浏览器，尤其是 Chrome。

像float这样的标准 CSS 前缀会是更好的选择。

PS - 没有像urf-8.

于 2012-10-25T23:18:32.787 回答
0

您似乎只使用了-webkit特定于基于 webkit 的浏览器（例如 safari 和 chrome）的前缀，或者使用其他前缀 ( -moz, -o)，或者使用Compass，这对于维护前缀非常有用，因为代码始终反映最新的浏览器支持。

于 2012-10-26T11:28:40.973 回答
0

根据定义，供应商前缀只应该在单个供应商的浏览器中工作，因为它们表示自定义规则或尚未标准化的事物的实验性实现（尽管对此存在一些争议）。

该-webkit-位是供应商前缀，仅适用于使用WebKit 渲染引擎的浏览器，其中最流行的是 Chrome 和 Safari。 这是其他渲染引擎的已知供应商前缀列表。因此，如果您采用此规则：

body {
    width:100%;
    display: -webkit-box;
    -webkit-box-pack: center;
}

你所拥有的并不是真正的 CSS3，而是 WebKit 自定义 CSS。CSS3，如果您使用的规则和属性得到批准，看起来像这样（不要使用此代码）：

body {
    width: 100%;
    display: box;
    box-pack: center;
}

box在标准和最终确定之前，此规则将在浏览器中不起作用box-pack，为了获得最大的当前支持，您的规则必须如下所示（再次，不要使用此代码）：

body {
    width:100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-box-pack: center;
    -o-box-pack: center;
    box-pack: center;
}

这种复杂性是人们使用Compass等工具生成样式表的原因。

然而，我一直在说你不应该使用这段代码，原因是在 CSS3 中不再有任何box计划box-pack。它们已被使用flex关键字的新方法所取代。尽管flex替换box它们的工作方式并不完全相同，因此它不是直接翻译。对供应商前缀box属性的支持将淡出或恢复为自定义 CSS（整个box方法一开始是自定义 CSS，Firefox 用于在浏览器工具栏中布局 UI 元素，即根本不适用于网页）。

这是您使用供应商前缀 CSS 规则所面临的风险——行为甚至语法都可能发生变化。如果您打算使用它们，您必须掌握规范，并仔细监控浏览器中实验性实现的进度。

于 2012-10-26T11:41:35.903 回答