相关疑难解决方法(0)

父母的CSS过滤器破坏了孩子的位置

我目前正在网站上，遇到这种奇怪的行为。我不确定这是一个错误还是如何解决它，所以我想向您寻求帮助。

因此，我有这个标题屏幕的“动画”，该标题的标题位于全屏页面的中央，当您向下滚动时，标题变小并保留在页面顶部。这是一个具有预期行为的工作示例，从中我剥离了所有不必要的代码以使其最小化：

$(window).scroll( () => {
    "use strict";
    let windowH = $(window).height();
    let windowS = $(window).scrollTop();
    let header  = $("#header").height(); 
	
    if (windowS < windowH-header) {
        $("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
        $("#header").css("transform", "translateY(0)");
        $("#inside, #content").css({
            "position": "static",
            "margin-top": 0
        });
    } else {
        $("#inside").css({
            "position": "fixed",
            "margin-top": -windowH+header
        });
        $("#content").css("margin-top", windowH);
    }
  
    $("#header").css("position", windowS > (windowH-header)/2 ? "fixed" :"static");
});

Run Code Online (Sandbox Code Playgroud)

.fixed {
    position: fixed!important;
}
.wrapper {
    width: 100%;
    text-align: center;
}
.wrapper:before {
    display: table;
    content: " ";
}
.wrapper:after {
    clear: both; …

Run Code Online (Sandbox Code Playgroud)

css css-position css3 css-transforms css-filters

leo*_*ess

2019 04-10

10
推荐指数

1
解决办法

1831
查看次数

Mac 上的 Chrome 和 Safari 之间的十六进制颜色显示不同

十六进制颜色值是否可能在浏览器之间显示不同？在网站上工作时，我一直注意到 Chrome 和 Safari 预览时使用的红色存在差异。

Chrome：版本 58.0.3029.110（64 位）
Safari：版本 10.1.1 (12603.2.4)
MacOS Sierra：版本 10.12.5 (16F73)
iMac（视网膜 5K，27 英寸，2014 年末）

代码：

<!DOCTYPE html>
<html>
<head>
	<title>Color Test</title>
	<style type="text/css">
body {
	height: 200px;
	background-color: #ff3324;
}	
	</style>

</head>
<body>


</body>
</html>

Run Code Online (Sandbox Code Playgroud)

色彩对比截图：左：Chrome
右：Safari