标签: html5boilerplate
IE和HTML5 doctype问题
我正在使用伟大的HTML5样板.这是一个很棒的项目,但我在IE 8和7中有一些大问题(可能是8但尚未尝试)
这些文件具有HTML5文档类型:
<!doctype html>
<head>
但问题是没有完整和丑陋的doctype如...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
我得到了所有类型的渲染问题:以边距为中心:自动无法工作,高度,宽度,集合和填充都表现得像疯了一样,我的所有布局都被打破了,<!doctype>但如果我切换到旧的,一切都很好(好吧,不是很好,它仍然是IE,但正如预期的那样)
HTML5 Boilerplate附带了Modernizer,我认为应该解决这个问题,但它不起作用.从我的"研究"(谷歌)我发现IE进入怪癖模式宽度<!doctype>,所以问题是......
有没有办法防止IE进入怪癖模式<!doctype>？
或者至少不要破坏边距,宽度,填充等？
编辑:这是完整的头:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
推荐指数
解决办法
查看次数
<head>部分中有多高可以安全地放置Google跟踪代码管理器代码？
Google跟踪代码管理器指示开发人员:
粘贴此代码[跟踪代码]作为高在
<head>页面尽可能的:
<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX');</script> <!-- End Google Tag Manager -->
我的问题是,该代码的正确位置有多高？正确的意思,能够在> 95%的浏览器上运行而没有问题/警告/错误,和/或根据HTML最佳实践.
它可以在开始<head>标记后面吗？只要它在<head>某个部分,它真的很重要吗？
作为参考/示例,下面是HTML样板.什么是样板中跟踪代码的最佳位置？
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are …推荐指数
解决办法
查看次数
移动优先网站的Html5Boilerplate或Html5Boilerplate Mobile？
既然Html5Boilerplate已达到2.0版并且面向移动优先设计,那么Html5Boilerplate Mobile是否还应该用于移动优先网站？只想问b/f我挖掘每个代码.
看起来一个明显的区别是Html5Boilerplate已经从CSS重置切换到标准化,并添加了诸如respond.js和移动媒体查询部分之类的移动优先方面.标准样板也在Github上更活跃.有人对这两个有什么看法吗？
推荐指数
解决办法
查看次数
我刚刚在WebStorm中创建了一个HTML 5 Boilerplate项目.是否有用于编译"dist"文件夹的标准命令？
我开始使用WebStorm 9.我创建了一个HTML 5 Boilerplate项目,我注意到了一个src和一个dist文件夹.
是否有标准命令将src文件夹的内容编译到dist文件夹中？
这就是我的项目的样子:
推荐指数
解决办法
查看次数
HTML5 Boilerplate,HTML5重置CSS验证
我正在为我的网站项目选择HTML5模板.我一直在使用过去几个月使用Boilerplate的HTML5 Initiliazr,但决定重新评估这两个模板,因为我不喜欢HTML5 Boilerplate的CSS对W3 CSS验证器(CSS3)无效的问题.
现在的问题是,鉴于这两个CSS重置也考虑到供应商quirknesses,将那些曾经重置完全无效或无法承担这样的事情？
我确实注意到HTML5重置实际上比Boilerplate少了几个问题但是将来可能会改变.但是,我确实阅读了Boilerplate关于为什么每种风格都被引入以及它解决了什么问题的解释,所以它有点理解.
所以你怎么看？
推荐指数
解决办法
查看次数
对于Rails应用程序,HTML5 Boilerplate的价值是多少？
有几个应用程序模板(和一个Rails gem)将HTML5 Boilerplate添加到Rails应用程序.所以我调查了一下HTML5 Boilerplate for Rails的分析.似乎HTML5 Boilerplate并没有添加太多新Rails应用程序中尚未存在的内容.什么有用:
示例humans.txt文件
示例index.html文件,用于默认应用程序布局
viewport metatag
Google Analytics代码段
有一些CSS帮助,如CSS规范化,占位符CSS媒体查询和CSS帮助程序类,但似乎你可以使用CSS工具包,如Skeleton,Twitter Bootstrap或Zurb Foundation获得所有这些和更多.
最后,HTML5 Boilerplate为需要支持IE6,7和8的网站提供了许多组件,例如IE条件评论,Modernizr和Chrome Frame.但如果我不支持IE6并且我使用Twitter Bootstrap或Zurb Foundation,我认为我不需要这些.
HTML5 Boilerplate是一个很好的项目,有很多社区输入.在其网站上有很多好的建议.但对于Rails项目？
我错过了什么吗？对于Rails应用程序,HTML5 Boilerplate的价值是多少？
推荐指数
解决办法
查看次数
默认情况下,SVG内容是否应在嵌入式<svg>外部可见？
在过去,我回答了一个关于"谁错"的问题,关于SVG图像没有overflow: hidden在IE9中"裁剪"(),其他所有支持浏览器都这样做.答案就在这里.
今天,在重新审阅HTML5 Boilerplate时,我注意到他们声称他们"使用这段代码"[正确]溢出而不是隐藏在IE9中":
svg:not(:root) { overflow: hidden; }
我正在寻找某人通过指向HTML5或SVG规范中的其他注释来确认或否认我的原始研究.我找不到任何东西,但我想确定我没有错过任何东西.
我能找到的最好的是他们试图在这里应用规则7 ,但这应该仅适用于SVG文档,例如通过img标签或直接加载.
推荐指数
解决办法
查看次数
Bootstrap相当于HTML5Boilerplate的.visuallyhidden
是否有一个Twitter Bootstrap相当于HTML5Boilerplate的.visuallyhidden非语义助手类？我在CSS文件中看不到类似的东西..visuallyhidden类的目的是在视觉上隐藏它,但使文本可用于屏幕阅读器.是否有不同的Bootstrappy方法来实现相同的目标？
// HTML5Boilerplate's non-semantic helper class
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
相关的Bootstrap非语义助手类没有达到同样的效果:
// Some of Twitter Bootstrap's non-semantic helper classes
.hide {
display: none;
}
.invisible {
visibility: hidden;
}
推荐指数
解决办法
查看次数
凉亭安装html5boilerplate是一件好事吗？
我的问题是用bower安装html5boilerplate很好吗？之后如何进行,因为它有自己的css和javascript目录,所有内容都将在bower_component/html5boilerplate下
推荐指数
解决办法
查看次数
如何扩展谷歌分析以跟踪AJAX等(根据H5BP文档)
我正在尝试google analytics augments在extend.mdH5BP文件中安装标识(https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/extend.md)
它声明"优化的"谷歌分析JS片段包括以下代码:
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
并且如附加增强件track jquery AJAX requests,track javascript errors和track page scroll应后添加 _gaq被定义.
事实上,当前版本的H5BP中包含的片段不_gaq作为变量引用:
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
尝试使用任何H5BP扩展时,这会产生未定义的错误.例如
if (typeof _gaq !== "undefined" && _gaq !== null) {
$(document).ajaxSend(function(event, xhr, settings){
_gaq.push(['_trackPageview', settings.url]);
});
}
不起作用,因为没有定义_gaq.
这些增益是如何实现的？有人可以提供一个显示所有扩展的完整实现的工作示例吗？
谢谢
推荐指数
解决办法
查看次数
标签 统计
html5boilerplate ×10
html5 ×6
css ×2
html ×2
javascript ×2
ajax ×1
bower ×1
css3 ×1
jquery ×1
mobile ×1
npm ×1
svg ×1
validation ×1
w3c ×1
webstorm ×1