草庐IT

html - 垂直负边距在 IE8 中不起作用？

coder 2023-08-09 原文

第一次在这里问我自己的问题:)

我在一个网站上工作，我尝试使用通常的技巧将它垂直扩展到客户端窗口的底部:

html, body { height: 100%; }
.container { min-height: 100%; }

然后我想在主要内容上方添加一些标题，并在底部添加一个粘性页脚。我将这两个包装在它们自己的容器中，并将标题拉到顶部，如下所示:

.top { position: relative; z-index: 1; height: 168px; }
.end { height: 58px; }

知道了页眉和粘性页脚的高度，然后我着手调整页面的总高度，这样它就可以完全填满客户端窗口(没有滚动条)，除非内容太长。我用负边距做了这个:

.container { overflow: hidden; min-height: 100%; margin-top: -164px; margin-bottom: -58px; }
.container-in { margin-top: 164px; margin-bottom: 58px; }

第二个容器在第一个容器内，是我放置每个页面的实际内容的地方。

所以，这在 Firefox 4/5 上工作得很好 - 绝对没有任何问题，正如预期的那样。 Chrome 似乎也不错。但是，在 IE8 上，它忽略了 .container 上的负边距(我使用开发人员工具进行了检查)。容器在 .top 之后开始，因此由于 .container-in 的边距，.top 和 .container-in 之间有 164px 的间隙。

有趣的是——如果我将 IE8 切换到 IE7 兼容模式，这个问题就不再出现了!负边距在 IE7 模式下表现得很好，但当然还有很多其他东西会损坏，所以告诉 IE 使用兼容模式不是一个选项。

关于如何解决这个问题/使用不同的解决方案在所有浏览器中获得相同效果的任何想法(不需要 IE7)？我做错了什么吗？

编辑:经过更多的乐趣和游戏后，我发现通过将负边距替换为负顶部:坐标(并将所有容器设置为相对坐标)它在 IE8 上完美运行但现在它留下了 222px在 firefox 中的 html 容器下方 有间隙(根据 firebug)。糊涂了!

EDIT2:从技术上讲，我相信我知道这里出了什么问题。 Internet Explorer 8 认为负边距是“溢出”，并且由于溢出:隐藏，它杀死了边距。如果我删除 overflow: hidden 它不再有这种行为，但它会破坏设计的其余部分。有人有任何想法吗？

最佳答案

About Conditional Comments . How To Create an IE-Only Stylesheet .

尝试只为顶坐标为负的 IE8 设置样式:

<!--[if gte IE 8]>
<style>
.container { top: -164px; }
</style>
<![endif]-->

关于html - 垂直负边距在 IE8 中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6618895/

htmlIE8sectioncontainer容器cssinternet-explorer-8margins

有关html - 垂直负边距在 IE8 中不起作用？的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  7. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  8. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  9. ruby - 在 Ruby 中，垂直线是什么？ - 2

    1.upto(9){|x|printx}为什么这行不通？{printx|x}}y呢？ 最佳答案 它用于传递给您的block的参数。即在您的示例中，upto将使用1到9中的每个数字调用您的block，当前值可作为x获得。block参数可以有任何名称，就像方法参数一样。例如1.upto(9){|num|putsnum是有效的。就像一个方法的参数一样，一个block也可以有多个参数。例如hash.each_pair{|key,value|puts"#{key}is#{value}"} 关于ru

  10. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

随机推荐