我正在尝试缩放一个 div，但将内部元素保持在相同位置 和相同大小。为此，我在包装器上使用 transform: scale(value) 并在内部 div 上使用 transform: scale(1/value)。
问题是，当我改变比例时，内部的 div 发生了变化。只有当 wrapper 的宽度/高度为奇数或不完整时才会发生这种情况。对于包装器的均匀宽度/高度，它不会发生。
我的目标是让 wrapper 的许多子元素与 wrapper 一起缩放，但只有一个不能。
查看此示例以查看实际问题(悬停以缩放)。
示例没有问题，内部元素保持固定在比例上(容器的高度和宽度是偶数):
https://jsfiddle.net/o16rau6u/5/
.wrapper {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
transform: scale(2);
}
.wrapper:hover .bg {
transform: scale(0.5);
}<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
问题的例子，内部元素按比例移动了一点(容器的高度和宽度是奇数):
https://jsfiddle.net/o16rau6u/6/
.wrapper {
width: 201px;
height: 201px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
transform: scale(2);
}
.wrapper:hover .bg {
transform: scale(0.5);
}<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
无论容器大小如何，我该如何解决这个问题并避免我的元素按比例移动？
PS : 上面使用的示例是一个非常简化的示例来显示问题，它不是所需的输出或使用的代码。因此，我们不会寻找另一种方法来实现上述相同的行为，因为它很容易完成。。
最佳答案
一开始我认为这与浏览器所做的计算和一些舍入有关，但它似乎是错误。我做了很多测试，不管我使用的秤的值是什么，它总是在 奇数 值上失败。
这是一个只有 scaleX
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(2)">
<div class="inner" style="transform:scaleX(0.5)">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(2)">
<div class="inner" style="transform:scaleX(0.5)">A</div>
</div>
正如您在下面看到的，浏览器似乎向内部 div 添加了一个额外的像素，但如果您仔细观察，内部 div 的大小是正确的，但它被平移到右边 1px .所以 Dev Tools 的悬停 block 被正确定位但不是元素本身!所以看起来浏览器正确地计算了位置但是画错了。
如果我们只是在容器上应用缩放，也会出现同样的问题。所以这不是因为内部元素的规模:
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}<div class="box" style="transform:scaleX(2)">
<div class="inner">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(2)">
<div class="inner">A</div>
</div>
即使我们使用带有比例的浮点值，我们可以说存在一些循环和复杂的计算，我们也有正确的偶数输出和奇数输出:
比例尺 (1.25) 和比例尺 (1/1.25) 的示例:
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(1.25)">
<div class="inner" style="transform:scaleX(0.8)">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(1.25)">
<div class="inner" style="transform:scaleX(0.8)">A</div>
</div>
比例尺 (1.33) 和比例尺 (1/1.33) 的示例:
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(1.33)">
<div class="inner" style="transform:scaleX(calc(1 / 1.33))">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(1.33)">
<div class="inner" style="transform:scaleX(calc(1 / 1.33))">A</div>
</div>
关于html - 变换比例对于奇数像素宽度不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48044040/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我正在查看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并在看到包时选择
我有一个rubyonrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素
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任务的东西:
我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co
我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent
