小编Bry*_*lis的帖子

题

当使用的条件注释是针对IE8及以下时,html5shiv如何在IE9上工作并且Safari 4.x和Firefox 3.x读取IE 条件注释？如果没有html5shiv如何使用他们的Github指令中建议的条件评论在这些浏览器上工作？[if lt IE 9]

这里有一个问题,询问是否可以在没有条件评论的每个浏览器中使用它以及副作用会是什么,但这不是我的问题.4年前问过这个问题.HTML5现在已成为标准配置,Microsoft不再提供对旧版浏览器的支持,因此在每个浏览器中加载它都会让人感到疯狂,我不会考虑这一点.我的问题与Github上的文档有关,html5shiv使用该文档开箱即用,以及如何使用它来支持它声称支持的浏览器.

在github上引用关于html5shiv脚本的自述文件:

"它还为IE6-9,Safari 4.x和FF 3.x的HTML5元素应用了基本样式."

用途:

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

根据Stat Counter的数据,在过去的一年中,IE 8和9的总和已从全球使用量的4%左右降至约2%.自1月12日微软放弃对传统浏览器的支持以来,html5shiv似乎现在或将很快成为过去.看看这些传统的IE浏览器在未来一年中会下降多少将会很有趣.

但是,根据您正在开发的内容,您可能仍希望支持这些浏览器.当您在上述统计数据中包含Safari 4.x和Firefox 3时,html5shiv支持的浏览器共享总量为2.3%.对于大多数人来说什么都不是,但如果你拥有一个电子商务网站,2.3%可能是巨大的.

关于我的实际问题,我想我或者忽略了文档中的某些内容,或者对IE条件评论不够了解.

从逻辑上讲,我认为这将是最好的方法.IE中的条件注释通过版本5到9工作,因此我们不应该无理由地在IE5中加载脚本.

<!--[if !(IE 5)]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

然而,在过去的5年里,我从未见过有人这样做,所以我显然错过了一些东西.另外,我仍然没有看到这对FF 3和Safari 4有什么用,除非有一个错误或什么导致他们不阅读评论.关于这个问题,我在html5shiv github上打开了这个主题,但是还没有得到答案.

HTML5shiv很容易在数百万个网站上使用,大多数开发人员和网站所有者认为它支持IE9 Safari 4和FF 3开箱即用.

另外,据我所知,就IE9而言,这就是html5shiv支持它的全部内容.

article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}

如果这是真的,可能是许多人停止使用它的另一个原因,考虑到当你把它拿出来并将它包含在你的css(或css重置)中时,你的浏览器数量下降到1.39% …

所以我注意到移动Chrome会将地址栏计算到视口高度.因为这height: 100vh在元素上的使用不起作用,因为当地址栏滚动视口高度变化时.

我实际上能够在ios上找到一个同样问题的问题,但经过进一步调查后我意识到这种情况发生在所有移动Chrome浏览器上.当地址栏滚出视口,然后再滚动到视口时,视口高度会更改.

这会导致任何使用的元素vh重新计算,这会使页面跳转.使用背景图像时非常烦人,因为它会导致图像在滚动时调整大小.

这是代码和示例

   .jumbotron {
        background-image: url(http://example.com/image.png);
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        height: 100vh;
    }

使用移动设备上下滚动时,您将只能看到问题.

我的问题是,我想知道有没有办法绕过这个或如果不是如何计算移动铬的全高度而不会导致页面跳转(css或js).

http://s.codepen.io/bootstrapped/debug/qadPkz

更新:所以至于使用jquery这里我提出的似乎工作得很好:

function calcVH() {
    $('.jumbotron').innerHeight( $(this).innerHeight() );
}
$(window).on('load resize orientationchange', function() {
  calcVH();
});

上面的工作示例演示

我希望能够在没有javascript的情况下做到这一点,尽管如果有人有他们知道的CSS替代方案.

对于一个有多个标签的博客/文章,如何添加Facebook Open Graph数据？

这似乎是最合乎逻辑的方式.但是它报告说它在Facebook调试器中是不正确的:

<meta  property = "article: tag"  content = "advocate, charity, crowdfunding, Healthcare, hospitals, Medical Bills, Medicare, negotiate, uninsured" >

像这样添加上面的相同似乎是正确的,但它似乎很荒谬:

<meta property="article:tag" content="advocate" />
<meta property="article:tag" content="charity" />
<meta property="article:tag" content="crowdfunding" />
<meta property="article:tag" content="Healthcare" />
<meta property="article:tag" content="hospitals" />
<meta property="article:tag" content="Medical Bills" />
<meta property="article:tag" content="Medicare" />
<meta property="article:tag" content="negotiate" />
<meta property="article:tag" content="uninsured" />

这样做的正确方法是什么？是否有更"优化"的写作方式？

我已经看到很多与此类似的不同问题,但所有这些问题通常都针对特定的选择器.如果某处有重复,请告诉我,我错过了.

采取这种情况:

你想为wordpress,drupal或任何使用第三方功能的网站构建一个jquery插件.由于您事先并不知道每个特定事件和选择器,因此您需要定位如何将jquery/javascript功能添加到动态创建的元素中.另外,你不知道如何创建元素(使用ajax/php/etc回调).

例:

我最近尝试将select2或selectize添加到我的整个网站.不幸的是,由于我无法提前确定将添加选择元素(来自其他插件/模块),我无法确保选择jquery将适用于新创建的选择.

选择二

这是常规方法,但不适用于动态创建或克隆的选择:

<script type='text/javascript'>
    jQuery(document).ready(function($) {
        $("select").select2();
    });
</script>

如果我知道添加这些选择的所有事件,我可以简单地执行以下操作:

 $( ".some_button_that_creates_new_selects" ).on( "click", function() {
        jQuery("select").select2(); 
    });
 });

但是,由于我不知道所有动态选择器的选择器(因为许多是由第三方插件添加的),所以select2将不适用于新的选择.所以上面只适用于每个案例的senerio.

我需要找到一种遍历dom树的方法,并识别何时创建新选择.

我尝试使用.on定位几个事件,但它根本不能正常工作.

我读到javascript document.getElementsByTagName识别dom中的更改并反映在集合中.我也调查过querySelectorAll,但不确定它是如何工作的.

我也试过搞乱MutationObserver并检查.addednodes.length选择标签是否改变,但我没有真正得到任何地方.

UPDATE

在做了一些测试后,我意识到问题可能在于select2插件本身.Select2加载动态选择但没有获得定位.Chrome最终会抛出typeerros:无法读取属性'find'的null,无法读取属性'hasclass'的null.

我过去曾经遇到过一些@ font-face webfonts.我最近下载了免费的Museo Sans 500 webfont,但我遇到了一些问题,某些字母间距正确,字面f.调整CSS letter-spacing属性时,如果有"f",则在"f"之后的第二个字母之前不会再次应用字母间距.

例如:

或者使用单词的另一个例子:

无论如何,我遇到了这个也使用字体的网站,但是当他们在网站上弄乱文本和字母间距时,它没有任何问题.

我之前从未创建或编辑过字体,所以我不确定这是否与编辑字体本身有关,或者是否与@ font-face有关,可能还有我可以用css修复的东西.

我已经尝试搞乱了我所知道的每个css字体属性,但似乎没有一个能解决这个问题.

font-variant-ligatures:
font-kerning: 
letter-spacing:     
text-rendering: 
font-feature-settings: 
font-kerning: 
-webkit-font-smoothing: 
text-size-adjust:
font-size:

我遇到了一个非常漂亮的插件,kerning.js我可以用来暂时解决这个问题,但是对于一个字母来说似乎有些过分,特别是因为它似乎在我之前链接的其他网站上工作正常.有关如何使用CSS修复此问题的任何建议,或者是我与字体本身有关的事情>