CSS百分比在IE中完全失败

我刚完成设计我的摄影网页。我使用Chrome作为我的测试浏览器。CSS百分比在IE中完全失败

但在IE浏览器打开我的网页，什么也没有看到。在遇到一些麻烦之后，我将问题隔离到了使用百分比的事实。我在网上搜索解决方案，但一切都是关于小变化（与填充和百分比有关）。

下面是一个简单的HTML文件，在Chrome的作品完美，但不是所有的IE（股利为像素少中，通过文本的存在略有扩大）。非常感谢您的帮助。如果我无法解决这个问题，我将不得不彻底重新设计我的网站。

<html> 
<head> 
    <title>A test HTML</title> 
    <style type="text/css"> 
     #currpage 
     { 
      position: absolute; 
      bottom: 18%; 
      right: 10%; 
      left: 35%; 
      top: 15%; 
      border:2px solid green; 
      z-index: 240; 
     } 
    </style> 
</head> 
<body> 
    <div id="currpage" style="visibility: visible; opacity: 1;"> 
     This is just a test. 
    </div> 
</body> 
</html>

来源

2012-05-15 small fish

在我的小VirtualBox上适用于IE8。你在测试什么版本？ –

您是否尝试过...实际制作格式良好的HTML文件？

如果没有DOCTYPE，浏览器呈现的怪癖模式的页面。在IE的情况下，它会像在IE5.5中那样呈现，但是它不支持很多现在基本的东西。

添加<!DOCTYPE HTML>到文件的开始。

编辑：当你在它，总是包含内容类型<meta>标签（如<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />使浏览器知道编码是什么还考虑增加<meta http-equiv="X-UA-Compatible" content="IE=edge" />迫使IE使用最严格的。标准模式，它们都出现在我的每一个页面上，甚至是空白模板上，DOCTYPE和Content-Type是必需的（如果你想让它实际工作），Compatible头是可选的（我主要用它来摆脱了兼容模式按钮是烦人接近刷新按钮...）

来源

2012-05-15 19:43:39

对于DOCTYPE建议+1，但示例_is_实际上是格式良好的。虽然这不是有效的。 –

重新编辑：'meta content-type'标签不是*必需的，尽管没有一个标签混淆了W3验证器。所以把它放进去不会有什么伤害的。但是，对于HTML5，“meta charset”标签更有意义。 –

谢谢！这解决了我的问题。我非常专注于将头部和身体标签内的所有东西都放在正确的位置，所以我忘了定义文档类型。我听说过很多关于IE的问题，所以当没有什么可见的时候，我惊慌失措。 –

嗯，我在Mac上，所以我不能检查它，但它似乎塔如果您的HTML中没有文档类型，那么IE可能会遇到麻烦，因为他不知道如何解析代码。

在第一行（甚至<html>之前-Tag写：

<!DOCTYPE html>

这是一个HTML5文档

编辑： ....编辑... 。忘记这一点。

来源

2012-05-15 19:45:28

你的编辑没有意义。你有没有看过所有四个位置设置为零的元素？ –

不是，但主要是因为我很难在桌面和移动环境中维护，因此我尽量避免绝对定位。 –

好的，删除了编辑。真的没有看到它，所以不知道有四个边的定位是有用的。 –

包含元素的设置高度和宽度明确。我有一个类似的问题与我的旧网页之一（在Firefox和Chrome工作得很好，去地狱IE）和我发现，在那个Firefox Chrome会自动设置包含元素的维度（如果没有明确指定），然后将这些百分比作为这些假设的基础。 IE并没有做出这样的假设，所以当它看起来百分比时，它基本上是说“35％是什么？”

来源

2012-05-15 20:13:18

CSS百分比在IE中完全失败

回答

相关问题