个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
25
4
我正在尝试复制 html5doctor.com 的布局。我这里安装了IE8。我能够产生以下输出:
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="header">
</div>
<div id="nav">
<div id="navmenus">
<ul id="navmenulist">
<li class="menu" id="id1">
<a href="#">Home</a>
<li class="menu">
<a href="#">Products</a>
<li class="menu">
<a href="#">About Us</a>
</ul>
</div>
</div>
<div id="content" >
<div id="article"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS
/*I have added CSS Reset from http://meyerweb.com/eric/tools/css/reset/
Just deleted it for simplicity
*/
body
{
margin:0px;
padding:0px;
background-color:#E8E8E8;
text-align:center;
}
#header
{
background-color:#1F7ADB;
width:100%;
height:150px;
}
#nav
{
background-color:#1F7ADB;
width:100%;
text-align:center;
}
#navmenus
{
background-color:#14B3F7;
width:900px;
text-align:left;
}
li.menu
{
list-style:none;
display:inline;
height:35px;
padding:12px;
}
li.menu:hover
{
background-color:yellow;
}
li.menu a
{
text-decoration:none;
font-family:Arial;
font-size:18px;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
}
公告li.menu:hover在上面的 CSS 中。它在 IE8 中不起作用。所以我添加了 <!DOCTYPE html>按照 this thread 的建议.
它使悬停工作但现在它打破了布局如下:
我希望获得能够首先在 IE8 上运行的结果，然后想要学习在主要(可能不在 IE6 中)浏览器中始终如一地运行的解决方法。并且很乐意坚持使用 CSS 和 HTML(无脚本)。最重要的是，我想了解这里到底出了什么问题。
最佳答案
从 body 中删除 text-align:center; 并使用 margin:auto 作为您希望在页面中居中的 block 元素..
需要它的元素是#navmenus和#content，所以
#navmenus
{
background-color:#14B3F7;
width:900px;
margin:0 auto;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
margin:0 auto;
}
关于html - doctype html 破坏布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13950783/
25
4
0
有很多线程解释了选择什么 Doctype，但我找不到任何解释实际语法的线程。举个例子: 特别是: PUBLIC 是否可以替换为其他值，是什么意思？ 为什么 url 需要用引号括起来？ 是什么 ”-”
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
我正在尝试制作 100% 高度的东西，但添加文档类型会破坏它。这在 other questions 上进行了解释. 然而，我发现了一些奇怪的事情——如果我关闭 doctype 标签(我知道你不应该这样
美好的一天， 我正在开发一个 C# Web 应用程序，一切正常，直到我添加普通的 JavaScript。 html代码如下: JScript.js是放入的 JavaS
我有一个主要的框架集页面，它使用 FRAMESET 文档类型..现在它里面有 3 个框架.. 现在对于第 2 帧，我想使用一些 HTML5 代码 ()...所以我想我必须使用 doctype 现在我的
我正在制作一个网页，我即将完成，所以我决定通过一个 html 验证器来验证它，但我的页面出现了一堆错误。我的页面目前适用于 ...但是当我输入 我页面的间距中断。 示例:工作时的图片 代码: 当我添
我刚刚在 W3C 验证器上检查了我的个人登陆页面以确保它是正确的 HTML5，然后发现我需要 而不是 通过。 但是背景图片不会延伸到底部。我已经尝试了 wrapper 的最小高度，并清除了，但似乎没有
这是文档类型所在的文件: Taekwendo tinymce.init({ selector: '#art
这是我的问题的 html 代码 Insert title here var arr = [ "A", "B", "C" ]; for (var i = 0; i 在
我在抓取一些具有多个 声明的网站时遇到了困难。 。 我正在使用带有 requests 的 Python 2.7.9 和来自 bs4 的 BeautifulSoup。当我执行 requests.get
我刚刚在 Windows Server 2008 上创建了一个新的 IIS 网站，以便使用它来部署新网站。 该网站仍然是空的。 如果我尝试在“管理工具”下打开 IIS Web 平台安装程序，则会遇到错
是否有使用 HTML 5 文档类型的专家 ，即使我没有使用任何新的 HTML 5 标签？即使我没有使用任何新的 HTML 5 标签，用 HTML 5 文档类型替换 XHTML 文档类型有什么好处吗？
假设我想将旧网站更改为“HTML5”风格。简单地更改标题是否安全 doctype如下？ 原始文档类型可能是: 或 如果改为不可能破坏遗留网页的呈现方式，我认为它是安全的。 最佳答案 为什么是的，
通过在 windows 命令提示符下运行以下命令创建了一个全新的 express.js 项目 npm install express -g express newproject cd newproje
我懂了 DOCTYPE is disallowed when the feature "http://apache.org/xml/features/disallow-doctype-decl" se
这个问题在这里已经有了答案: background-color property doesn't work correctly with HTML5 DOCTYPE [duplicate] (1
我在没有使用 Doctype 的情况下构建了我的页面，但是没有它我可以获得我期望的结果。 即使用户尝试调整窗口大小时，我也尝试每行列出 4 张图像并填充页面。 问题是我最近添加了 Doctype，这里
我注意到我的一个 html 表单存在问题，文本输入字段被截断了。我将其原因缩小到我们在页面顶部使用的 指令。 当我排除 指令时，下面场景中的输入正确呈现，这意味着文本输入字段被完整绘制。但是当我按
我知道很多人在切换到 时遇到类似的问题行，然而，我已经尝试了所有的方法，甚至是经典的 html{height: 100%;} body {min-height: 100%;} 方法，以及其他方法，但
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: How to replace with in an html file 我在我的
我是一名优秀的程序员,十分优秀！