更新 :在阅读这篇文章并说您需要更多代码来复制问题之前，我要问的一个简单问题是:
“当该属性已经在该元素上并且应该在默认情况下工作时，您是否曾经不得不删除并重新应用元素上的 CSS 属性以应用该样式？如果是这样，您的解决方案是什么，或者您是知道最终导致问题的原因是什么吗？”
更新 2 :我不是 100% 确定，但这可能只是 font-size 的问题属性并使用 Javascript 动态更改它。在 Javascript 中重新调整大小的外部和/或内部元素的 CSS 可以正常工作，这个问题似乎只发生在字体大小调整中，尤其是。也许周围的 HTML 的 CSS 没有捕捉到 font-size关于内存密集型样式更改(如我们的调整大小功能)。只是一个猜测。
这篇文章的其余部分是澄清我在说什么的一种手段。
这个问题可能是 Chrome 独有的。澄清一下，我们的应用程序由我们的销售团队在内部使用，并且该元素专门用于开发和现场使用的 Chrome。在其他浏览器中打开它时，样式已经完全关闭，因为我们只需要创建与 Chrome 兼容的 CSS(我是如何幸运地获得这样的位置，我不知道，哈哈)。
我在我的编码生涯中只遇到过几次这个问题，我认为这是 CSS 中的一个错误，但可能只是 Javascript 在 DOM 中进行样式更改和父容器 CSS 由于可能而无法适应更改之间的罕见错误Javascript 将样式应用到 HTML 和 CSS 不更新以适应之间的内存限制或轻微的处理延迟。我认为这是一个重要的问题，因为我认为每个前端 Web 开发人员在他们职业生涯的某个阶段都已经或将会遇到这个问题。
情况
简而言之，我们的 body 内部有一个容器，我们使用 Javascript 将其调整为相对于窗口大小的 16:9 纵横比。截取了整个窗口的屏幕截图。如您所见，我们在浏览器窗口(黑色区域，即主体)内按比例调整了内部容器的大小。内部容器是我们应用程序的所有内容显示的地方:
我们的 CSS 尽可能使用百分比构建。我们构建了一个“resizeUI”函数，主要用于根据内部屏幕的当前宽度/高度比更改字体大小，尽管该函数中还有其他元素也可以在窗口重新大小时重新调整大小。窗口总是完美地重新调整大小，任何需要根据内部窗口的宽度/高度像素比进行特定大小调整的内容都可以按预期工作，子元素的基于百分比的 CSS 会适当调整。但是……
问题
当通过单击并拖动(增量调整大小)来调整浏览器窗口的大小时，页面上的所有内容都会完美地调整大小。但是，当窗口大小急剧变化时，立即全屏(最大化)变小(还原)，反之亦然，顶部菜单中的字体大小将更改但父级的 CSS li不会调整以适应新的字体大小，除非我取消选中(删除)它是 padding属性并重新检查它(重新添加它)。当我这样做时，它工作正常。 li容器真的只有一个 padding:1%因此，通常会根据随字体重新调整大小而变化的内部跨度大小来正确调整其大小。
家长 li应该自动适应内部span的变化字体大小。我对此持肯定态度，因为家长 li当我在检查器中即时修改菜单的字体大小或文本长度时，容器将自动重新调整自身大小。
这是在加载或增量窗口大小更改时通常的样子:
下面是当我使用 Maximize 从小窗口尺寸变为全屏时的样子:
我的(hacky)修复
我让它起作用的唯一方法是删除 <li> 的填充重新调整大小函数顶部的元素，然后在重新调整字体大小的行之后在重新调整大小函数的底部重新应用它。但是，这在 50% 的情况下有效。只有在重新调整大小函数的底部放置 100 毫秒超时以重新应用填充时，我现在才能 100% 地工作。
为了提供帮助，这是我正在使用的一个非常基本的代码示例。 ul自动调整其内部元素的大小:
相关HTML
<ul>
<li class="menu-items><span>Item 1</span></li>
<li class="menu-items><span>Item 2</span></li>
<li class="menu-items><span>Item 3</span></li>
<li class="menu-items><span>Item 4</span></li>
<li class="menu-items><span>Item 5</span></li>
</ul>
ul {
position:absolute;
top:0;
right:2%;
text-align:center;
}
.menu-items {
padding: 1%;
}
function resizeUI(){
$('.menu-items').css('padding','0');
//Random other elements being re-sized
$('.menu-items span').css('font-size', properRatio + "px");
//More elements being resized
$('.menu-items').css('padding','1%');
}
function resizeUI(){
$('.menu-items').css('padding','0');
//Random other elements being re-sized
$('.menu-items span').css('font-size', properRatio + "px");
//More elements being re-sized
setTimeout(function(){
$('.menu-items').css('padding','1%');
}, 100);
}
最佳答案
填充实际上正在起作用。每个单位(div 或您使用的任何单位)均与前一个单位重叠，因为您总共超过了 100% 的 View 宽度。它们是从左到右构建的，当它达到允许的最大尺寸的末尾时，它们都将同样地推过之前的那些。填充也会影响 div 内部的元素，不会影响自身外部的 div。所以它们都是正确的大小，但你还没有建立一个规则来阻止 div 重叠。 margin 可以做到这一点，但如果它们超过所需大小的 100%，您将不得不以某种方式处理溢出。您可以尝试使用 auto 进行填充，但边距可能会更好。否则，您将不得不调整大小和百分比以使其适合最大允许宽度。查看 CSS 盒模型 here .
关于javascript - 必须删除并重新应用 CSS 属性才能使其工作。可能的 CSS 错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35415874/
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为
我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val
查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah