更新:在阅读本文并说你需要更多代码来复制问题之前,我要问的一个简单问题是:
"你有没有必要删除并重新应用一个元素的CSS属性,以便当该属性已经在该元素上并且应该默认工作时应用该样式?如果是这样,你的解决方案是什么,或者你做了什么?知道最终导致问题的原因是什么?"
更新2:我不是100%肯定,但这可能只是font-size属性的问题,它使用Javascript动态更改.在Javascript中重新调整大小的外部和/或内部元素的CSS可以正常工作,这个问题似乎只发生在字体大小调整上.也许周围的HTML的CSS没有捕获font-size内存密集型样式更改(比如我们的resize函数).只是一个猜测.
这篇文章的其余部分是澄清我所谈论的内容的一种手段.
此问题可能是Chrome独有的问题.为了澄清,我们的应用程序由我们的销售团队在内部使用,该项目专门针对Chrome开发和现场使用.当在其他浏览器中打开它时,样式已经完全关闭,因为我们只需要创建我们的CSS以符合Chrome标准(我很幸运能找到这样的位置,我不知道,哈哈).
我在编码生涯中只遇到过这个问题几次,我认为这是CSS中的一个错误,但可能只是Javascript在DOM中进行样式更改和父容器CSS之间的一个罕见错误,因为它不能适应变化内存约束或Javascript将样式应用于HTML和CSS不更新以适应之间的延迟.我认为这是一个重要的问题,因为我认为每个前端Web开发人员在其职业生涯的某个阶段已经或将会遇到这个问题.
情况
为了使它尽可能短,我们在我们的体内有一个容器,我们使用Javascript来调整相对于窗口大小的16:9宽高比.取了整个窗口的截图.正如您所看到的,我们在浏览器窗口(黑色区域,即主体)内按比例调整内部容器大小.内部容器是我们的应用程序的所有内容显示的位置:
我们的CSS尽可能使用百分比构建.我们构建了一个'resizeUI'函数,它主要用于根据内部屏幕的当前宽度/高度比来改变字体大小,尽管该函数中还有其他元素也可以在窗口重新调整大小时重新调整大小.窗口总是完美地重新调整尺寸,并且基于内部窗口的宽度/高度像素比率需要特定尺寸的任何东西都按预期工作,子元素的基于百分比的CSS适当调整.但....
问题
通过单击并拖动(增量重新调整大小)来重新调整浏览器窗口大小时,页面上的所有内容都会完美地重新调整大小.但是,当窗口大小急剧变化,即时,全屏(最大化)变为小(恢复向下),反之亦然,顶部菜单中的字体大小将改变但是父级的CSS li将无法调整以适应新的font-size除非我取消检查(删除)它的padding属性并重新检查它(将其重新添加).当我这样做,它工作正常.该li容器真的只是有一个padding:1%,因此,正常调整是正确的基础上,内部跨度的大小与字体重新大小改变大小.
父级li应自动调整为内部span字体大小的更改.我对此持肯定态度,因为li当我在检查器中动态修改菜单的字体大小或文本长度时,父容器将自动重新调整大小.
这是在加载或增加窗口大小更改时通常看起来的样子:
以下是使用Maximize从小窗口大小到全屏幕时的样子:
我(hacky)修复
只有这样我才能使用它来移除<li>重新调整大小函数顶部元素的填充,然后在重新调整字体大小的行之后重新应用它的重新调整大小函数的底部.但是,这种情况占50%的时间.只有当在重新调整大小函数的底部放置100ms超时以重新应用填充时,我才能让它在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>
Run Code Online (Sandbox Code Playgroud)
相关的CSS
ul {
position:absolute;
top:0;
right:2%;
text-align:center;
}
.menu-items {
padding: 1%;
}
Run Code Online (Sandbox Code Playgroud)
相关的Javascript
什么有效约1/2的时间
function resizeUI(){
$('.menu-items').css('padding','0');
//Random other elements …Run Code Online (Sandbox Code Playgroud) 默认情况下,Brave 会阻止所有 3rd 方 cookie,这很好,但是,我想在使用 LocalStorage 的本地项目上工作,但出现以下错误。
Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
我不想关闭 3rd 方 cookie 阻止,这确实解决了问题,但我宁愿将本地文件访问列入白名单(不允许白名单file://协议)。
是否有可能在不关闭全局“阻止所有 3rd 方 cookie”设置的情况下使其正常工作?
我正在为应用程序构建一个管理页面,并且有一个状态值“已验证”,在成功登录(在服务器上进行身份验证)后从“假”翻转为“真”,然后显示实际的管理面板。
组件状态值是否不会被客户端篡改?基本上,如果客户端可以将我的“已验证”状态值修改为“真”,他们可以跳过登录并直接进入管理面板(我显然不想要)。
我读到 React Dev Tools 允许客户端修改值,但每个人都说“在服务器上验证”,但我正在服务器上验证并相应地更新我的状态,如果用户获得批准。如果让状态值来管理它是不明智的,那么在成功的服务器端身份验证登录后有条件地显示管理页面的正确方法是什么?
我认为这是一个重要的问题,因为篡改 React 应用程序中的状态值会对应用程序/数据库中的数据完整性产生巨大的负面影响。
我正在使用 Electron Builder 来打包我的应用程序并处理自动更新。是否可以让我的应用程序从静态目录中的 zip 文件自动更新?它说仅 NSIS 支持自动更新,我认为这意味着使用 NSIS 或 NSIS-web 将始终需要可执行文件进行更新。
我公司的 VPN 不允许在网络上托管可执行文件,因此我只是想了解是否可以使用 Electron Builder 使用 zip 文件来更新我的 Electron 应用程序(无需求助于 Squirrel)
我想将字体或静态图像放在画布上,但不确定使用 Matter.js 的最佳方法是什么。现在,对于图像,我只是创建一个大小为“0”的主体并将图像 url 放在 render.sprite.texture 属性中。似乎可以解决问题,但是否有不同/更好的方法将静态图像放在画布上?
此外,在创建/绘制其他任何内容之前,我正在使用脚本顶部附近的 'afterRender' 事件将文本放到画布上:
_sceneEvents.push(
Events.on(_engine, 'afterRender', function(event) {
var context = _engine.render.context;
context.font = "45px 'Cabin Sketch'";
context.fillText("THROW OBJECT HERE", 150, 80);
});
);
Run Code Online (Sandbox Code Playgroud)
唯一的问题是文本一直被绘制在顶部,所以我的可拖动对象一直在文本后面。我只希望文本留在背景中,就像静态图像一样,但我认为在画布上绘制字体可能比让用户下载另一个图像更好。有什么帮助吗?
如今,是否使用表单来提交数据似乎并不重要。就我个人而言,我似乎最终只是在提交表单时使用 JavaScript 手动从必要的输入中获取值(或者只是一个旨在触发从页面获取所有输入数据的函数的按钮)。
使用表单直接提交数据与仅从页面抓取所需元素和使用 AJAX 发送数据之间有什么重大区别吗?
编辑:如果您要投反对票,将不胜感激。我之前没有在 StackOverflow 上看到过专门提出的问题,而且现在标准变化很快,大多数新开发人员可能想知道使用表单比手动获取输入有什么意义。
我想将我的电子应用程序的--user-data-dir设置为自定义目录,在我的情况下,我希望它默认为公共目录中的文件夹,因此运行该应用程序的任何用户将共享相同的资产目录.
看起来Electron的appendSwitch()函数不支持这个(当我尝试时它没有工作),所以我对如何实现这个开关感到很遗憾.
我正在使用Electron-Builder NSIS来捆绑我的 Electron 应用程序。运行捆绑包/可执行文件时,应用程序会安装并自动启动。如何防止应用程序自动启动?基本上是尝试进行静默安装,可以从命令行批量运行。