草庐IT

html - 我的 HTML 专栏在哪里?

coder 2023-08-12 原文

我最近获得了……机会……完全重新设计我支持的网站的布局。为了保持我的 CSS 简单和 HTML 语义,我决定使用 the "holy grail" layout 的修改版本。 (主要区别在于将右列移到中间列内,这进一步简化了事情,并使中间列固定宽度)。

经过微不足道的调整后,我在 FF3、Chrome 和 Opera 中使用了新布局,这意味着是时候启动 IE6 了。不出所料,布局中断(左栏完全丢失)。然而,我没想到它会如此惊人地崩溃——我似乎在 IE6 中触发了某种渲染错误,我既无法隔离也无法消除。

在调整 chalice 布局时,我最初省略了它使用的 IE6 特定 hack,因为我对右栏所做的修改不需要(不应该?),因为它说明对于该列的宽度,它不会出现在我的布局中的同一级别。尽管如此,我的第一个猜测仍然是将它重新添加进去,但事实证明它需要一个非常奇怪的数字(246px,它没有出现在样式表的其他任何地方),所以我尝试调整窗口大小以确保它不相关到页面大小。令我惊讶的是,然后该列向右跳动了约 1000 像素,远远超出了页面的边缘。

返回并删除 IE6 hack,调整大小时会发生相同的行为,只是它不是从布局的左侧跳出页面,而是突然出现在右侧-布局的手边。我对布局的每一部分都进行了研究,这些部分似乎甚至是远程相关的,并用谷歌搜索了我所知道的所有 IE6 渲染错误,但似乎无法消除页面调整大小跳转行为。

有没有人以前见过这个错误,如果是错误的话?完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Modified grail layout</title>

        <style type="text/css">
            * {
                border: 0;
                margin: 0;
                padding: 0;
            }

            #main {
                background: white;
                overflow: auto;
                padding-left: 180px;
            }

            #content {
                background: #dfd;
                float: left;
                padding: 10px 10px 0;
                width: 800px;
            }

            #left {
                background: #ccc;
                float: left;
                margin-left: -100%;
                position: relative;
                padding: 10px 10px 0;
                right: 180px;
                width: 160px;
            }

            #right {
                background: #fdd;
                float: right;
                margin-bottom: 10px;
                padding: 10px 10px 0;
                width: 160px;
            }

            #top {
                margin: 0 auto;
                width: 1000px;
            }

            body {
                background: #ddf;
            }

            /* fake content */

            #cc1 {
                height: 320px;
                width: 800px;
            }

            #cc2 {
                height: 320px;
                margin-right: 190px;
            }

            #cc3 {
                height: 160px;
                margin-right: 190px;
            }

            #lc1 {
                height: 120px;
                margin-left: auto;
                margin-right: auto;
                width: 144px;
            }

            #lc2 {
                height: 300px;
                width: 160px;
            }

            #lc3 {
                height: 400px;
                width: 160px;
            }

            #rc1 {
                height: 400px;
                width: 160px;
            }

            #rc2 {
                height: 300px;
                width: 160px;
            }

            div.fake-content {
                background: #666;
                color: white;
                margin-bottom: 10px;
            }

            /* Internet Explorer (all) */

            #ie body {
                text-align: center;
            }

            #ie #left {
                text-align: center;
            }

            #ie #left * {
                text-align: left;
            }

            #ie #right {
                margin-bottom: 0;
            }

            #ie #top {
                text-align: left;
            }

            /* Internet Explorer 6 */

            #ie6 #left {
                left: 246px; /* WTF!? */
            }
        </style>
    </head>

    <body>
        <!--[if IE 6]><div id="ie"><div id="ie6"><![endif]-->
        <!--[if IE 7]><div id="ie"><div id="ie7"><![endif]-->
        <!--[if IE 8]><div id="ie"><div id="ie8"><![endif]-->

        <div id="top">
            <div id="main">
                <div id="content">
                    <div id="cc1" class="fake-content">cc1</div>

                    <div id="right">
                        <div id="rc1" class="fake-content">rc1</div>
                        <div id="rc2" class="fake-content">rc2</div>
                    </div>

                    <div id="cc2" class="fake-content">cc2</div>
                    <div id="cc3" class="fake-content">cc3</div>
                </div>

                <div id="left">
                    <div id="lc1" class="fake-content">lc1</div>
                    <div id="lc2" class="fake-content">lc2</div>
                    <div id="lc3" class="fake-content">lc3</div>
                </div>
            </div>

            <p id="footer">&copy;2009 Blah blah blah</p>
        </div>

        <!--[if IE]></div></div><![endif]-->
    </body>
</html>

最佳答案

#top 指定 position: relative 可以在 IE6 中修复它,信不信由你。

参见 this , these

关于html - 我的 HTML 专栏在哪里?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/580137/

有关html - 我的 HTML 专栏在哪里?的更多相关文章

  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 - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

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

  4. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

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

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

  6. ruby - 我可以将我的 README.textile 以正确的格式放入我的 RDoc 中吗? - 2

    我喜欢使用Textile或Markdown为我的项目编写自述文件,但是当我生成RDoc时,自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件?它可以配置为自动检测文件后缀的格式吗?(例如README.textile通过RedCloth运行,但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件,只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:

  7. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  8. java - 我的模型类或其他类中应该有逻辑吗 - 2

    我只想对我一直在思考的这个问题有其他意见,例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我

  9. 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)'

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

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

随机推荐