我在html5reset.org上使用优秀的HTML 5重置模板,我的X-UA兼容元标记似乎不起作用.这是我的标题的样子:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ieNoHtml5 ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ieNoHtml5 ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ieNoHtml5 ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!-- the "no-js" class is for Modernizr. -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title of Page</title>
将显示在IE中使用兼容性视图模式的选项(URL字段中的损坏的页面图标).问题是我的一些客户已经将IE9浏览器设置为"始终使用兼容性视图"模式,结果是网站看起来像IE7,即使他们使用的是IE9,而X-UA-Compatible也可以覆盖这个.
现在,如果我删除有趣的标题:
<!DOCTYPE html>
<html …我是Bootstrap的新手,我在导航栏上面放置一个标题时遇到了麻烦.我需要有一个标题,当前网站的高度至少为70像素,同时我需要确保通过手机看到响应能力.我目前的代码是
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#index.html"><img src="img/navigationlogo.png" alt="Home"/></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
<a href="#index.html"><img src="img/Home_Button.png" width="24" height="21" alt="Home"/></a>
</li>
</ul>
</div>
</div>
</div>
</div>
我认为我能做的是添加
<header></header>
在导航栏上方并将我的徽标放在那里.
有人可以提供一个示例代码与css如何实现这一目标？我听说要维护一些最小填充,以便通过移动设备看到响应式导航.
.htaccessHTML5 Boilerplate(http://html5boilerplate.com/)的缓存设置非常棒,但我遇到了JS和CSS版本控制的缓存破坏设置问题.
<IfModule mod_rewrite.c>
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L]
</IfModule>
我似乎无法使用.htaccess文件中已存在的WordPress重写设置.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
充其量,我的JS文件的重写永远不会发生.在最坏的情况下,它打破了网站.
任何人都有运气使用WordPress吗？
我正在尝试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,因为它是一个很棒的框架,但我和其他开发人员一直在关于图像替换类和text-indent:-999em的使用.
他给我发了这两个链接:
http://luigimontanez.com/2010/stop-using-text-indent-css-trick/
http://www.youtube.com/watch?v=fBLvn_WkDJ4
我知道HTML5Boilerplate团队在整理样式表时做了很多研究,我知道这是许多开发人员使用的常用技术.你们怎么看待它？我应该开始使用其他技术,以便我们的网站不会受到惩罚,还是可以继续使用它？
谢谢!
我的客户要我使用Foundation.我习惯使用带有960网格系统的HTML5Boilerplate.我只是想知道我可以在H5BP上使用Foundation吗？我将非常感谢您的指导.
我一直在使用以下代码在我的所有项目中加载JQuery.我从http://html5boilerplate.com/上抓了它.有这种技术的广泛disussion 这里.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.7.1.min.js"><\/script>');</script>
这个代码工作得很好,一旦我把它放在interwebs上似乎很快,但是当我.html在本地打开我的文件时,每次刷新需要大约10秒.通常我厌倦了并改变代码如下:
<!-- uncomment when going live
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.7.1.min.js"><\/script>');</script>-->
<!-- remove following line when going live -->
<script src="jquery-1.7.1.min.js"></script>
我错过了一些明显的东西吗？我觉得我不应该得到超慢的加载时间,但它会在注释掉这些行时自行解决.
默认情况下,HTML5 Boilerplate模板中包含以下行:
::-moz-selection{background:#fe57a1;color:#fff;text-shadow:none;}
::selection{background:#fe57a1;color:#fff;text-shadow:none;}
但是,我想将选择颜色保留为操作系统默认值(在Windows中为蓝色,我认为它在Ubuntu中为棕橙色).如果我省略背景属性,就没有背景.
我正在使用Twitter Bootstrap 2.2.1 Initializr样板工作项目.为了正确覆盖Bootstrap的默认CSS属性,您需要在"main.css"中为受影响的类创建一个条目,并添加所需的属性.
在这种特殊情况下,Bootstrap有一个名为'.collapse'的类,它应用于默认的导航栏.
.collapse{
position:relative;
height:0;
overflow:hidden;
-webkit-transition:height .35s ease;
-moz-transition:height .35s ease;
-o-transition:height .35s ease;
transition:height .35s ease
}
对我造成问题的部分是'position:relative;'.我需要那里没有立场声明.现在我知道我可以打开Bootstrap CSS文件并对其进行编辑,但如果文件得到更新,则更改将丢失.
覆盖此CSS条目的正确方法是什么？
通过Google网站管理员工具的PageSpeed分析器运行我的网页后,它向我报告我的资源都没有被缓存.下面是直接从H5BP获取的.htaccess文件中的代码.我是否正确假设下面的过期设置正确并且我的实现中出现了问题,或者我是否必须为每个文件名设置明确的过期而不是广泛的概括？
# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------
# These are pretty far-future expires headers.
# They assume you control versioning with filename-based cache busting
# Additionally, consider that outdated proxies may miscache
# www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
# If you don't use filenames to version, lower the CSS and JS to something like
# "access plus 1 week".
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs …html5boilerplate ×10
css ×5
html5 ×3
css3 ×2
html ×2
jquery ×2
.htaccess ×1
ajax ×1
caching ×1
image ×1
initializr ×1
javascript ×1
replace ×1
text-indent ×1
wordpress ×1