- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在调整现有的非 Canvas 设计,但碰壁了。我添加了子菜单,现在它们在菜单关闭时显示。我猜这是一个定位问题,但看了几天后我无法弄清楚。还值得注意的是,仅当视口(viewport)足够小以激活媒体查询时才会出现此问题。这是代码:
这是一个有问题的站点的工作示例 example . 我尝试创建一个 fiddle ,但它无法正常运行。在 Chrome 中查看以查看问题并调整浏览器大小以查看 Canvas 菜单问题。
HTML:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>some site</title>
<script src="js/plugins/modernizr.js"></script>
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="css/style.css">
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
</head>
<body>
<div id="outer-wrap">
<div id="inner-wrap">
<header id="top" role="banner">
<div class="block">
<h1 class="block-title">TEST</h1>
<a class="nav-btn" id="nav-open-btn" href="#main-nav">Main Menu</a>
</div>
</header>
<nav id="main-nav" role="navigation">
<div class="block">
<h2 class="block-title">Main menu</h2>
<ul>
<li class="is-active">
<a href="#">Link</a>
</li><!--
--><li>
<a class="toggle-sub-nav closed" href="#">Link</a>
<ul class="sub-nav">
<li><a href="#">Sub link</a></li>
<li class="is-active"><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
</ul>
</li><!--
--><li>
<a href="#">Link</a>
</li><!--
--><li>
<a class="toggle-sub-nav closed" href="#">Link</a>
<ul class="sub-nav">
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub link</a></li>
</ul>
</li><!--
--><li>
<a href="#">Link</a>
</li>
</ul>
<a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
</div>
</nav>
<section id="main" role="main">
<article class="block prose">
<h1>Some content NEW30</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
<p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. </p>
<p>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. </p>
<p>Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. </p>
<p>Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. </p>
</article>
</section>
<footer role="contentinfo">
<div class="block prose">
<p class="small">Copyright © <a href="http://ashleybriscoe.com/">Some author</a></p>
</div>
</footer>
</div><!--/#inner-wrap-->
</div><!--/#outer-wrap-->
</body>
<script src="js/scripts/jquery-1.10.2.min.js"></script>
<script src="js/scripts/main.js"></script>
<script src="js/plugins/jquery.hammer.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/plugins/selectivizr.js"></script>
<![endif]-->
</html>
CSS:
body {
color: #333;
position: relative;
width: 100%;
min-width: 20em;
background: #7C9769;
}
.block {
position: relative;
margin: 0 auto;
padding: 1.5em 1.25em;
max-width: 60em;
}
.close-btn {
display: block;
width: 2.625em;
height: 2.25em;
padding: 0;
border: 0;
outline: none;
background: #7C9769 url("../assets/img/close-btn.svg") left center no-repeat;
background-size: 1.875em 1.875em;
overflow: hidden;
white-space: nowrap;
text-indent: 100%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.no-svg .close-btn {
background-image: url("../assets/img/close-btn.png");
}
.close-btn:focus, .close-btn:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.nav-btn {
display: block;
width: 2.625em;
height: 2.25em;
padding: 0;
border: 0;
outline: none;
background: #7C9769 url("../assets/img/nav-icon.svg") left center no-repeat;
background-size: 1.875em 1.5em;
overflow: hidden;
white-space: nowrap;
text-indent: 100%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.no-svg .nav-btn {
background-image: url("../assets/img/nav-icon.png");
}
.nav-btn:hover, .nav-btn:focus {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
#outer-wrap {
position: relative;
overflow: hidden;
width: 100%;
}
#inner-wrap {
position: relative;
width: 100%;
}
#main-nav {
z-index: 200;
position: relative;
width: 100%;
color: #fff;
}
#main-nav .close-btn {
display: none;
}
#main-nav .block-title {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
#main-nav .block {
z-index: 2;
position: relative;
padding: 0.75em 1.25em;
background: #7C9769;
}
#main-nav ul {
*zoom: 1;
display: block;
}
#main-nav ul:before, #main-nav ul:after {
content: "";
display: table;
}
#main-nav ul:after {
clear: both;
}
#main-nav li {
display: block;
width: 11em;
}
#main-nav li a {
display: block;
color: #365239;
font-size: 0.875em;
line-height: 1.28571em;
font-weight: bold;
outline: none;
}
#main-nav li a:focus, #main-nav li a:hover {
color: #EEE;
}
#main-nav li.is-active a {
color: #EEE;
}
#main-nav li ul li { float: left; border-right: none;}
#main-nav li ul li a:focus, #main-nav li ul li a:hover {
color: #7C9769;
}
#main-nav li ul li.is-active a {
color: #7C9769;
}
.js .sub-nav {
height: 0;
width: 11em;
background-color:#E4E1E1;
overflow:hidden;
position: absolute;
top: 52px;
}
.js .sub-nav-open {
height: auto;
position: absolute;
margin: 0;
padding: 0;
top: 52px;
}
.no-js #main-nav li ul.sub-nav {
display: none;
width: 11em;
background-color:#E4E1E1;
}
.no-js #main-nav li:hover ul.sub-nav {
display: block;
position: absolute;
border-top: solid 11px #7C9769;
margin: 0;
padding: 0;
z-index: 2000;
}
.closed { background: url(../assets/img/arrows.png) no-repeat 90% -28px; }
.open { background: url(../assets/img/arrows.png) no-repeat 90% 9px; }
#top {
z-index: 100;
position: relative;
color: #fff;
background: #7C9769;
}
#top .block-title {
margin: 0;
font-size: 1.3em;
line-height: 1.2em;
text-align: center;
white-space: wrap;
}
#top .nav-btn {
position: absolute;
top: 0.7em;
left: 1.875em;
}
#main {
background: #fff;
padding-top: 20px;
padding-bottom: 20px;
}
footer[role="contentinfo"] {
background: #ddd;
}
@media screen and (min-width: 45.0625em) {
#top .nav-btn {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
#main-nav .close-btn {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
#main-nav .block-title {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
#main-nav ul {
text-align: center;
white-space: nowrap;
}
#main-nav li {
display: inline-block;
border-right: 1px solid #CCC;
}
#main-nav li:last-child {
border-right: none;
}
#main-nav li a {
padding: 0.42857em 0.85714em;
}
}
@media screen and (max-width: 45em) {
#main-nav {
position: absolute;
top: 0;
padding-top: 4.5em;
}
#main-nav:not(:target) {
z-index: 1;
height: 0;
}
#main-nav:target .close-btn {
display: block;
}
#main-nav .close-btn {
position: absolute;
top: -3.75em;
left: 1.875em;
}
#main-nav .block {
position: relative;
padding: 0;
}
#main-nav li {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
}
#main-nav li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#main-nav li.is-active:after {
z-index: 50;
display: block;
content: "";
position: absolute;
top: 50%;
right: -0.03125em;
margin-top: -0.625em;
border-top: 0.625em transparent solid;
border-bottom: 0.625em transparent solid;
border-right: 0.625em white solid;
}
#main-nav li a {
padding: 0.85714em 2.14286em;
}
.js .sub-nav {
height: 0;
width: 100%;
background-color:#E4E1E1;
overflow:hidden;
}
.js .sub-nav-open {
height: auto;
max-height: 400px;
top: 0;
position: static;
overflow: hidden;
}
.no-js #main-nav li ul.sub-nav {
display: none;
width: 100%;
background-color:#E4E1E1;
}
.no-js #main-nav li:hover ul.sub-nav {
display: block;
top: 52px;
margin: 0;
padding: 0;
border-top:none;
}
.closed { background: url(../assets/img/arrows.png) no-repeat 95% -24px; }
.open { background: url(../assets/img/arrows.png) no-repeat 95% 13px; }
#main-nav li ul li {
border-top: 1px solid #CCC;
}
#main-nav li ul li:last-child {
border-bottom: none;
}
.js-ready #main-nav {
height: 100%;
width: 70%;
background: #7C9769;
-webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
}
.js-ready #main-nav .block {
background: transparent;
}
.js-ready #main-nav .close-btn {
display: block;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
}
.js-ready #main-nav .close-btn:focus, .js-ready #main-nav .close-btn:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.js-ready #main-nav {
left: -70%;
}
.js-ready #inner-wrap {
left: 0;
}
.js-nav #inner-wrap {
left: 70%;
}
.csstransforms3d.csstransitions.js-ready #main-nav {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.csstransforms3d.csstransitions.js-ready #inner-wrap {
left: 0 !important;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.csstransforms3d.csstransitions.js-nav #inner-wrap {
-webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
-moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
-ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
-o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
}
.csstransforms3d.csstransitions.js-ready #main-nav .block {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
-webkit-transition-delay: ease, 0s;
-moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
-o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
transition: opacity 300ms 100ms ease, transform 500ms ease;
-webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
-moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
-ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
-o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.csstransforms3d.csstransitions.js-nav #main-nav .block {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
这是显示 Google Chrome 中问题的屏幕截图:
最佳答案
尝试将以下属性添加到媒体查询中的 .csstransforms3d.csstransitions.js-ready #main-nav .block
此类
CSS
@media screen and (max-width: 45em) {
.csstransforms3d.csstransitions.js-ready #main-nav .block {
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
/*Other styles goes here*/
}
}
关于html - 添加子导航到 Canvas 导航,现在子菜单标题和菜单在菜单关闭时显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20883140/
我附上了一个我尝试使用 html/css 实现的示例(如果您看不到图像:名字和姓氏,然后第二行是职位描述)。我希望所有文本(两行)在一个 div 中强制对齐(左和右),但我不确定这是否可能。我尝试了一
我想使两个 h1 元素成为 div 上的标题/页眉。所以每个都在特定的 div 之上。 Youtube Achievements
我想让每个 EditText 对象都有自己的标题,就像 Pure Android 指南中那样 (screenshot) 这个东西有原生支持吗?我想他们也可能会使用带有部分的 ListView ,但这对
是否可以像 UITableView headerView 一样创建 UICollectionView 标题 View ?我的意思是整个集合 View 的标题 View ,而不是每个部分的重复 View
我一直在遵循有关排版的 Google 官方 Material 设计指南 (http://www.google.com/design/spec/style/typography.html),但我发现它们
我目前正在尝试找到可以帮助我从视频文件中提取元数据或信息的 python 库,例如 [ mp4, Mkv, Avi, WebM, mpg ] 格式为例。 我主要从视频文件中提取的主要数据是 [标题、描
你好, 这是我正在尝试做的: 将每个缩略图的内容(img + 标题)居中。我的 img 必须是 span3,标题必须是 span4。 这是我的问题: 我可以获取内容中心,或者标题 float 在 im
我有一个带有导航栏的应用程序,可以从一个 View Controller 导航到下一个 View Controller 。在某些模拟器和设备上导航到下一个 View Controller 时,后退按钮
我遇到了一些非常酷的 t-sql,可以从一个 t-sql 查询中的选定行生成一个逗号分隔的列值列表: SELECT @MyList = ISNULL(@MyList,'') + Title + ',
请确保将 HTML heading 标签只用于标题。不要仅仅是为了生成粗体或的文本而使用标题。 搜索引擎使用标题为您的网页的结构和内容编制索引。 因为用户可以通过标题来快速浏览您的网页,所以用标
我正在使用 wkhtmltopdf 将 html 转换为 pdf。 我想在每个页面中添加标题,但它只显示在第一页(目录)中。 我使用的命令是 "C:\Program Files\wkhtmltopdf
如何使用 ggplot2 显示观察的方向(标题)?有没有办法调整shape=17 (三角形)以便它“指向”下一次观察? 示例代码 library(ggplot2) dat % pivot_wide
我尝试在 cocoa 应用程序中显示/隐藏标题栏。我使用以下代码: if ([window styleMask]==NSResizableWindowMask) { [wind
我有这样的 HTML 标题 http://s1.postimg.org/4ebyk3qwv/image.png 当我编写这段代码时: document.getElementById("TL85_1_
我叫麦克。谢谢你的帮助。 在Wordpress中,我们已经设计了我们的网站,以便在Facebook调试器中og数据尽可能接近youtube。尽管如此,在Facebook上共享视频的方式还是不同的。尽管
从 web 应用程序的客户端,我点击了服务器端路由,它只是第三方 API 的包装器。使用分派(dispatch),我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
从 web 应用程序的客户端,我点击了服务器端路由,它只是第三方 API 的包装器。使用分派(dispatch),我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
我是 SAPUI5 的新手,在导航、侧边栏和标题方面遇到一些问题。我想开发一个带有标题和侧边栏的应用程序。我为此使用“ToolPage”。每个页面都包含工具页,如下所示:
我最近在为客户做的项目中被介绍给Go。他们已经建立了代码库,需要进行一些更改。 我注意到所有的方法,结构等等都有一些奇怪的类似于标题的注释,如下所示: // SomeType ... type Som
我创建了一个采用整个屏幕布局的标题布局(xml 文件)... 我还创建了一个 listView 并将此 header_layout 添加到 listView 中: LayoutInflater inf
我是一名优秀的程序员,十分优秀!