Questions tagged «css»

CSS(层叠样式表)是一种表示样式表语言,用于描述HTML(超文本标记语言),XML(可扩展标记语言)文档和SVG元素的外观和格式,包括(但不限于)颜色,布局,字体,和动画。它还描述了如何在屏幕,纸张,语音或其他媒体上呈现元素。

11
如何跨浏览器标准化CSS3 Transition功能?
Webkit的过渡结束事件称为webkitTransitionEnd,Firefox为transitionEnd,歌剧为oTransitionEnd。用纯JS解决所有问题的好方法是什么?我应该浏览器嗅探吗?还是分别实施?我还没有发生过其他事情? 即: //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do whatever },false); 要么 // Assigning an event listener per browser element.addEventListener("webkitTransitionEnd", fn); element.addEventListener("oTransitionEnd", fn); element.addEventListener("transitionEnd", fn); function fn() { //do whatever }

5
CSS:顶部vs边缘顶部
我不确定我是否完全理解这两者之间的区别。 有人可以解释为什么我会在另一个上使用它们吗?它们之间有何不同?
91 css  css-position 

6
未捕获的TypeError:无法读取未定义的属性“ top”
如果这个问题已经回答,我深表歉意。我尝试搜索解决方案,但是找不到适合我的代码的解决方案。我还是jQuery新手。 对于两个不同的页面,我有两种不同类型的粘滞菜单。这是两者的代码。 $(document).ready(function () { var contentNav = $('.content-nav').offset().top; var stickyNav = function () { var scrollTop = $(window).scrollTop(); if (scrollTop > contentNav) { $('.content-nav').addClass('content-nav-sticky'); } else {; $('.content-nav').removeClass('content-nav-sticky') } }; stickyNav(); $(window).scroll(function () { stickyNav(); }); }); $(document).ready(function () { var stickyNavTop = $('.nav-map').offset().top; // var contentNav = $('.content-nav').offset().top; …
91 javascript  jquery  html  css  dom 


1
CSS3 Flex:向右拉孩子
这就是我的 小提琴 ul { display: flex; justify-content: flex-start; flex-direction: row; align-items: center; width: 100%; height: 100px; background: #333; padding: 15px; } ul li { padding: 15px; margin: 5px; background: #efefef; border: 1px solid #ccc; display: inline-block; list-style: none; } #item-1 { height: 50px; } #item-2 { height: 70px; } <ul> …
91 html  css 

7
如何在浏览器中检查和调整:before和:after伪元素?
我已经使用:after伪元素创建了一些相当复杂的DOM元素,并且我希望能够在Chrome Inspector或Firebug或同等版本中对其进行检查和调整。 尽管在此WebKit / Safari博客文章(2010年)中提到了此功能,但在Chrome或Safari中我都找不到此功能。Chrome至少具有复选框来检查:hover,:visited和:active状态,但看不到:before和:after。 此外,此博客文章(日期为2009!)提到IE开发人员工具中存在此功能,但是我目前正在使用Mac OS,因此这对我没有帮助。另外,IE不是我主要针对的浏览器。 有什么方法可以检查这些伪元素? 编辑:除了错误地认为Firebug无法检查这些元素外,我发现Opera非常擅长于检查:before和:after元素。

1
打印样式:如何确保图像不跨越分页符
编写打印样式表时,有一种方法可以确保图像始终仅在单个页面上,而不是跨多个页面。图像比页面小得多,但是基于文档流,它们最终位于页面底部并被分割。我看到的行为示例如下: Page 1 | | | (text text text) | | (text text text) | | ________________ | | | Top of image | | |____________________| ------page break------ ____________________ Page 2 | | Rest of image | | | |________________| | | … | 我想要什么 Page 1 | | | …

6
静态旋转超赞字体的图标
我想将字体超赞的图标静态旋转45度。它在网站上说: 要任意旋转和翻转图标,请使用fa-rotate- *和fa-flip- *类。 但是,这样做 <i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i> 不工作,而更换fa-rotate-45用fa-rotate-90呢。这是否意味着它们实际上不能任意旋转?

6
CSS过渡不适用于上,下,左,右
我有风格的元素 position: relative; transition: all 2s ease 0s; 然后,我想在单击后平滑地更改其位置,但是当我添加样式更改时,过渡不会发生,而是元素立即移动。 $$('.omre')[0].on('click',function(){ $$(this).style({top:'200px'}); }); 但是color,例如,如果我更改属性,则它会平滑更改。 $$('.omre')[0].on('click',function(){ $$(this).style({color:'red'}); }); 这可能是什么原因?是否有非“过渡性”的属性? 编辑:我想我应该提到这不是jQuery,它是另一个库。该代码似乎按预期工作,添加了样式,但是过渡仅在第二种情况下有效?



5
纯CSS折叠/展开div
我有一个纯CSS可折叠的div,它基于使用:targetpsuedoclass的其他人的代码。我要设置的页面是一个包含12个以上问题的页面,当您单击+按钮时,答案栏会在下面展开。我不知道如何在不编写大量额外CSS的情况下在此页面上制作多个折叠的div元素。任何人都有关于如何编写此代码的建议,以使我的CSS代码最小化?(即,所以我不必为12个以上的问题中的每一个输入一堆唯一的选择器)。 我无法使用Javascript,因为这是在不允许JS的wordpress.com网站上进行的。 这是我的jfiddle:http : //jsfiddle.net/dmarvs/94ukA/4/ <div class="FAQ"> <a href="#hide1" class="hide" id="hide1">+</a> <a href="#show1" class="show" id="show1">-</a> <div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div> <div class="list"> <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p> …
91 css  collapsable 


3
使元素不可单击(单击其后面的内容)
我有一个固定的图像,当用户滚动触摸屏(移动)时,该图像会覆盖页面。 我想使该图像“不可点击”或“无效”或其他,以便用户触摸并从该图像拖动时,它后面的页面仍会滚动,就好像该图像没有“阻塞”交互一样。 这可能吗?如果需要,我可以尝试提供一些示例说明的屏幕截图。 谢谢!
91 html  css  mobile  scroll  touch 

3
Flex / Grid布局不适用于按钮或字段集元素
我正在尝试将<button>-tag的内部元素与flexbox的居中对齐justify-content: center。但是Safari不会将它们居中。我可以将相同的样式应用于任何其他标签,并且可以按预期工作(请参见<p>-tag)。仅按钮左对齐。 尝试使用Firefox或Chrome,您会发现其中的区别。 有什么我必须覆盖的用户代理样式?或对此问题有其他解决方案? div { display: flex; flex-direction: column; width: 100%; } button, p { display: flex; flex-direction: row; justify-content: center; } <div> <button> <span>Test</span> <span>Test</span> </button> <p> <span>Test</span> <span>Test</span> </p> </div> 运行代码段隐藏结果展开摘要 和jsfiddle:http: //jsfiddle.net/z3sfwtn2/2/
91 html  css  safari  flexbox  css-grid 

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.