小编Nie*_*sol的帖子

这是一些HTML:

<iframe src="test.html" style="width: 200px; height: 100px;"></iframe>
<iframe src="test.html" style="width: 800px; height: 100px;"></iframe>

该test.html页面包含来自外部文件的一些CSS:

<link rel="stylesheet" type="text/css" href="style.css" />

样式表有:

@media all and (max-width: 600px) {
  body {background-color: red;}
}

以上是简化的,但足以证明问题:两个页面都是红色的,尽管其中一个明显比另一个更宽.演示页面

是什么赋予了？

(注意:在IE和Chrome中测试过 - Chrome很好,一帧红色,另一帧白色.)

将一条线转换为环是GIMP等图形程序中的一项简单任务:

过滤器⇒扭曲⇒极坐标http://adamhaskell.net/img/transform.png

我正在尝试研究是否可以在CSS中产生相同的效果.

所以我解决了以下问题:

• 上述算法映射x到r和y至?
• 要做到这一点,x被缩放到的范围内[0,w/2],与w作为图像的宽度
• 此外,y缩放到范围[0,2?]
• 将极坐标转换回笛卡儿:xc = rp*cos(?p)和yc = rp*sin(?p)
• 然后翻译结果,使原点位于图像的中心.
• 所以我们有:

x' = (x/2)*cos(y/h*2?) + w/2;  
y' = (x/2)*sin(y/h*2?) + h/2;

这一切都很好,但我怎么能在CSS中产生这样的变换呢？据推测,没有一个关键字是有用的,所以它必须是矩阵变换.好吧,我不知道如何从上面的两个方程构建矩阵,更不用说如何在CSS变换中表示它.

最后一步有人可以帮助我吗？

我正在尝试将一个"形状"转换为另一个"形状"的算法.两种形状都是任意的,甚至可能具有较小的,不连续的形状.

我到目前为止的基本思想如下:找到形状的边缘,沿着这些边缘放置点,然后对目标图像做同样的事情,然后将点移动到它们的目标.

这是一个例子:

我只是不知道从哪里开始.上面的图像是一个简化,实际用例有更复杂的形状/轮廓.我的主要问题是:如何处理不相交的形状？我能想到的最好的方法是找出两个部分之间的最近点,并将它们作为路径的一部分连接在一起.但是我该如何实现呢？

我还没有任何代码,我还处于规划阶段.我想我要求的是,是否有人可以将我链接到任何可能有用的资源,或者给出任何指示.搜索谷歌已经产生了一些有趣的变形算法,但它们都处理完整的图像并涉及将图像分解成碎片以重塑它们,这不是我正在寻找的.

请注意,这将在JavaScript中使用,但如果更容易,可以在PHP中预先计算.

我知道鼓励使用它mt_rand(),rand()因为它使用Mersenne Twister而不是任何PRNG rand()使用,但这里似乎从未考虑过用户活动.

事实上,用户的行为可以被认为是非常随机的.例如,在任何给定时刻,用户可能有4%的可能触发rand()一个功能的呼叫,用户触发三个rand()呼叫的概率为8%shuffle(),用户触发两个rand()呼叫的概率为20%,每个用户加载PRNG前进一页的时间.

毕竟,不是NPC运动是什么让神奇宝贝游戏中的RNG滥用如此令人沮丧？

因此,请记住,虽然rand()确实有其模式,但用户活动的随机性和用途的多样性rand()足以使rand()缺点无关紧要吗？从绝对意义上讲,mt_rand()"更随机".但这与人体元素的熵相比如何呢？

参考:阻止HTTP基本身份验证显示图像提示

为了保护我的用户生成的内容免受这种潜在的"利用",我添加crossorigin="anonymous"到所有[img]BBCode.

嗯,它在IE11中工作:当我测试漏洞利用时,图像不再触发验证对话框(已禁用缓存和不同的URL进行测试以获得良好的衡量标准).

但在Chrome中,漏洞利用不起作用......因为图像根本没有被加载.相反,我得到了明显相当常见的错误:

来自"XXXXX"的图像已被跨源资源共享策略阻止加载:请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许原点'YYYYY'进入.

也许我的理解是错误的,但我认为"anonymous"属性的价值可以让它发挥作用.

我错过了什么,如果有的话还有什么其他选择可以防止这个问题？

我最近遇到了一个问题,即用户抱怨他们无法访问某个页面,因为链接不是应该的位置.

经过一番头疼之后,我让他们禁用所有浏览器扩展,确定问题消失了.逐个重新启用扩展程序......

的AdBlock.

出于某种原因,它阻止了用户想要访问的页面的链接.

现在,我没有投放广告而且从不计划,所以通常我只是告诉有这个问题的人将网站列入白名单,一切都很顺利.但如果有人从来不知道开始时会出现问题,那么我实际上会失去流量.那我怎么能避免这个呢？

我唯一能想到的就是检测AdBlock并弹出一个小通知,说明AdBlock已知会破坏网站,而且由于我们不运行广告,他们可能想要为网站禁用它.我的意思是,该网站是一个游戏,这不是第一次浏览器扩展破坏它,但我不认为第一次访问者会很高兴看到弹出窗口要求禁用他们的阻止程序,你知道？

因此,实际上阻止AdBlock首先破坏网站的任何解决方案都会很棒.

一点背景:
人们喜欢游戏.
人们使用互联网.
互联网需要游戏.
游戏使用声音.
HTML5有<audio>.

好的,到目前为止一切都很好.

最近我发现 - 令我惊讶的是 - IE9实际上支持playbackRate.我急切地尝试了一下.更令人惊讶的是,它确实奏效了.我在Chrome中尝试过相同的功能,虽然它有效,但是当我设置它时它却非常光滑0.5.我已经放弃了Firefox,因为它不支持MP3.

继续,这是我的问题:IE和Chrome都会在更改playbackRate时应用音高修正.IE做得很好,Chrome做得很糟糕.无论哪种方式,我都不希望这样,我希望声音改变音高.有了这种力量,我可以删除650个文件,我必须在程序上生成一个备用音高,并且我的项目将拥有更多的自由.哎呀,如果我真的想,我甚至可以在HTML5中创建一个MOD轨道播放器(减去效果频道).

那么,HTML5规范中是否有任何内容允许我关闭音高修正,并且只是播放声音就好像样本已经被挤压在一起挤压了一样？

我最喜欢MOD格式的一个原因是能够循环回到歌曲中的任何给定点,使其成为具有"简介"后跟"主循环"的歌曲的完美选择.

当然,MP3不能做到这一点.

到目前为止,我做过这样的事情:

<audio src="/path/to/song.mp3" onEnded="this.currentTime = 12.345;"></audio>

浮点值是主循环开始的时间.

虽然这有效,但音频重新启动时会出现明显的暂停时间.我可以通过将目标时间设置在它应该的位置之前来减轻这种暂停的影响,因此节拍至少在时间上保持更近,但是它并不是真正理想的.

我能想到的主要选择是手动循环音频文件(例如,通过复制粘贴在Audacity中)以产生比最有可能需要更长的歌曲,但问题是它会导致在很多浪费的硬盘驱动器空间和带宽上,它不能解决人们喜欢一首歌并停止长时间听它的问题.

所以我想知道是否有办法循环MP3流.如果我正确理解格式,我应该能够确定主循环开始的文件中的位置(以字节为单位)(以秒为单位),因此理论上我可以构造一个无限循环的流.但是,HTM5音频会支持这样的流吗？

几乎所有with我能找到的资源记录都警告不要使用它,主要是因为如果没有定义变量,它可能会产生不可预测的影响.

我想理解它,以便我可以有效地使用它 - 毕竟,它是有原因的.甚至eval有它的非邪恶用途!

因此,考虑到这一点,假设我想从元素中删除所有子节点,而不使用 elem.innerHTML = "";

以下是安全的吗？

with(elem) while(firstChild) removeChild(firstChild);

请注意,此时我并不关心可读性,只关注功能.既然firstChild是removeChild所有元素节点的属性和方法,那么使用with这种方式应该没问题吧？

同样,假设我想设置一些样式.

with(elem.style) {
    color = "red";
    backgroundColor = "black";
    fontWeight = "bold";
}

由于所有这些都是样式对象的属性(即使没有在样式表中定义,它们也是空字符串),这样使用with就可以了,对吧？

我是否遗漏了某些内容,或者是不断使用with类似于针对PHP mysql扩展的内容的警告:防止愚蠢的程序员？

假设我有一个用户列表,每个用户都附加了一些号码.每个用户都列出如下:

<span><a href="/user/Niet">Niet</a> &rArr; 2</span>

它们的风格都是:

.userlist>span {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid currentColor;
}

这是一个实际的例子:

好吧,这看起来很好,用户列表可以长得很长,所以紧凑在这里很重要.我的问题是,右边缘是非常不一致的,所以我想知道是否有任何方法可以改善这一点.

当然,我的第一个想法是在跨度上设置固定宽度.但是,用户名宽度不是完全可预测的.你可以打电话iiiii给某人打电话WWWWW但是因为这不是monospace字体,你会得到"iiiii"和"WWWWW",那里的宽度非常明显不同.所以"最大宽度"基本上是最宽的允许字符,即W乘以最大用户名长度.我们试试吧......

EW.我不妨使用一个<ul>如果这是我将得到的结果.接下来的想法可能是让display:table宽度在列之间保持一致,同时仍然保持动态并且 - 假设大多数人都有合理的用户名(*咳嗽*......哦,嘿,这就是你如何逃避Markdown ......呵呵...... .) - 但它确实往往会留下很多空的空间.

所以我目前的想法是某种合理的对齐.这对文本很有效,对吧？但是,唉,text-align: justify确实在这种情况下完全错误,可能是因为要素之间没有空格.

我最后的尝试是使用flexbox,我已经在网站的新设计中使用了一些效果.让我们看看它display: flex; flex-wrap: wrap;在容器和flex: 1 0 auto;元素上的外观......

嗯,这看起来不太糟糕.不太糟糕

......嗯.很近.我真正喜欢的是最后一行元素不会被拉伸到最终.没关系,最后一行有三个或四个,但两个看起来有点傻,只有一个填满整个宽度,看起来很荒谬.

所以我想这整个小冒险归结为一个简单的问题:

我如何实现类似于对齐的行为,其中元素间隔使用容器的整个宽度,除了在它们应该使用它们的自然宽度的最后一行？

要完成这个小故事,感谢@ Michael_B的回答,这就是我如何实现解决方案:

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

结果如下:

美丽.