我看到固定位置元素在相对定位的父元素中的行为方式存在差异。根据我在网上找到的文档，FireFox 和 Chrome 应该将元素修复到视口(viewport)而不是父元素。但是，我发现如果我没有在固定元素上指定左/右值，它的行为表现为静态和固定之间的某种混合，从某种意义上说，它垂直固定到视口(viewport)，但移动时好像它是父元素中的静态元素。我找不到任何关于这些条件的官方/受尊重的文件。他们基本上都是这样说的:
Fixed Positioning Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page.
<body>
<aside>
Blah
</aside>
<div class="container">
<div class="nav">
BLARGH
</div>
</div>
</body>
body,
aside,
.container,
.nav {
margin:0;
padding:0;
}
aside {
background:red;
width:30%;
height:800px;
float:left;
}
.container {
position:relative;
height:800px;
width:70%;
background:teal;
float:right;
}
.container.stickied {
left:-100px;
}
.container .nav {
position:fixed;
background:yellow;
width:inherit;
}
最佳答案
这似乎是一个有趣的案例。让我们深入研究规范以了解发生了什么。
TL;博士: W3 规范在这方面非常模糊/未定义，但似乎所有浏览器都偏离了规范，或者至少，他们在细节未定义的地方做出了决定。然而，四个主要浏览器(Firefox、Chrome、IE 和 Opera)的统一在于它们似乎都以相同的方式偏离了规范。 Safari 绝对是这里的奇葩。
这就是 CSS2.1 规范在 Chapter 9: Visual formatting model 中所说的:
- 9.1.2 Containing blocks - In CSS 2.1, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box "establishes" the containing block for its descendants. The phrase "a box's containing block" means "the containing block in which the box lives," not the one it generates.
- 9.3 Positioning Schemes - Absolute positioning: In the absolute positioning model, a box is removed from the normal flow entirely and assigned a position with respect to a containing block.
- 9.6 Absolute Positioning - In the absolute positioning model, a box is explicitly offset with respect to its containing block. [...] References in this specification to an absolutely positioned element (or its box) imply that the element's
positionproperty has the valueabsoluteorfixed.
position:fixed;元素以及 position: absolute;元素。
- 9.6.1 Fixed Positioning - Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed position box, the containing block is established by the viewport.
position: fixed;元素具有视口(viewport)(好吧，不是字面上的视口(viewport)，而是一个与视口(viewport)具有相同尺寸和位置的框)作为它们的包含框。稍后由 中的规范支持。 10.1 Definition of containing block :If the element has 'position: fixed', the containing block is established by the viewport [...]
<html> 、 <body> 等)都位于视口(viewport)定义的这个初始包含 block 中。)<div class="nav">带有 position: fixed; 的元素应用于它应该有一个等于视口(viewport)的包含 block ，或者 初始包含 block ..nav的属性元素完成后，我们可以确定浏览器的行为方式。
- 9.7 Relationships between 'display', 'position', and 'float' - Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
position: fixed; 或 position: absolute; )，任何 float属性被忽略，即 <div>元素(以及其他)设置为 display: block; ，并且该元素根据其框偏移值 top 定位, right , bottom,和/或 left结合初始包含 block (视口(viewport))。
- 9.3.2 Box offsets: 'top', 'right', 'bottom', 'left' - An element is said to be positioned if its 'position' property has a value other than 'static'. Positioned elements generate positioned boxes, laid out according to four properties: top, right, bottom, left.
<div class="nav"> 的事实。应根据其框偏移量定位。auto ，然后将它们设置为零，CSS2.1 似乎没有指定如何使用 left 定位元素的情况。和 right值为零。 CSS Box Alignment Module Level 3 但是，确实提到该值设置为“开始”，其定义为:Aligns the alignment subject to be flush with the alignment container’s start edge.
position: fixed;元素，应该与视口(viewport)相同。但是，我们可以看到，对于所有主流浏览器，情况并非如此 .主要浏览器似乎都没有设置 position: fixed;根据规范的指示，包含 block 到视口(viewport)的 block 。相反，它们都表现得好像position: fixed; 之间的行为应该相同。和 position: absolute; .position: fixed;元素应该有一个包含 block 设置为视口(viewport)。同样清楚的是，供应商都决定以自己的方式填写规范的模糊部分，与此声明相冲突或完全忽略此声明。最有可能发生的是一个浏览器实现了他们的解释(IE7 是第一个支持 position: fixed; ，我相信，Firefox 2.0 紧随其后)，其余的也紧随其后。
关于html - 位置 :fixed element within a position:relative parent. 哪个浏览器渲染正确？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28576291/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作
我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru
question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我喜欢使用Textile或Markdown为我的项目编写自述文件，但是当我生成RDoc时，自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件？它可以配置为自动检测文件后缀的格式吗？(例如README.textile通过RedCloth运行，但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件，只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西: