Tag: CSS
如何使用JavaScript和CSS淡入和淡出
我想让HTML div标签淡入淡出。 我有一些淡出的代码，但是当我淡入时，div的不透明度保持在0.1，不增加。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Fade to Black</title> <script type="text/javascript"> //<![CDATA[ function slidePanel(elementToSlide, slideSource) { var element = document.getElementById(elementToSlide); if(element.up == null || element.up == false) { setTimeout("fadeOut(\"" + elementToSlide + "\")", 100); element.up = true; slideSource.innerHTML = "Bring it down"; } else { setTimeout("fadeIn(\"" […]
Rails Active Admin css与Twitter Bootstrap css冲突
我对Rails资产pipe道有点新鲜，所以我可能做错了什么。 我正在尝试为我的后端应用Active Admin和我的前端应用程序的twitter引导CSS。 我将bootstrap.css添加到/ app / assets / stylesheets，然后添加： //= require bootstrap 到application.css – 然后我做了本地资产的预编译 它似乎工作正常，但一些样式并不完全通过，我认为这是因为积极的pipe理的CSS是压倒一切的。 我的理解是应用程序将css资源编译到应用程序的css公共资产中，并且应用程序在运行时使用该文件。 我需要以某种方式将两者分开，并使用twitter引导CSS作为前端的主要CSS，也许告诉它不要在前端使用活动pipe理的CSS文件。 什么是最好的方法来做到这一点？
div class vs id
什么时候使用div最好是使用class vs id？ 最好是使用类，在HTML中说字体变种或元素？ 然后使用id的结构/容器？ 这是我一直有点不确定，任何帮助将是伟大的。
如何使Facebook的评论小部件stream畅的宽度？
是否有可能使Facebook的评论小部件stream畅的宽度？ 他们的文档显示了fb:comments xfbml或iframe的宽度字段，它被指定为： 宽度 – 以像素为单位的插件宽度。 最小build议宽度：400px。 所以也许这是不可能的
如何在Safari中使用jQuery查找多背景的background-position / background-image等
也许我在这里错过了一些东西。 我试图获取具有多个背景的元素（ div ）的当前背景信息，使用longhand background-repeat ， background-position和background-image 。 使用jQuery，我只是做var bPos = $('#element').css('background-position')来获取当前位置的集合，这会给我像'0 0, 100px 100px, left bottom' Firefox和Chromium（目前版本分别为5和12），但是在Safari（OS-X上的版本5）中，它只返回第一个值对（ '0 0' ）。 这些CSS值是在外部样式表中设置的。 有没有人有任何想法，为什么这是，以及如何去得到在Safari的全套价值对（使用速记background属性也不这样做）？ 编辑： 这是在外部样式表中使用的CSS： #page{ background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x; background-image: url('..http://img.dovov.comline.png'), url('..http://img.dovov.comline.png'), url('..http://img.dovov.comline.png'), url('..http://img.dovov.comline.png'), url('..http://img.dovov.comline.png'); background-position: 0 798px, 0 653px, 0 125px, 0 88px, 0 78px; } 编辑： 好的，我在jsFiddle上为此做了一个testing用例，并将其报告为jQuery 错误，因为它似乎是可重复的行为（虽然我接受它可能是浏览器实现问题，而不是实际上的jQuery错误）。 不过，如果有人有任何想法… 编辑： […]
确定最大可能的DIV高度
是否有推荐的方法来确定DIV可以设置的最大高度，并保持每个浏览器可见？ 这似乎没有logging在任何地方，并且具有很高的实施特定性。 例如，请参阅以下testing脚本： http://jsfiddle.net/NP5Pa/2/ 这是一个简单的testing，可以在元素的相应clientHeight变为0之前find最大值，您可以设置DIV样式高度属性。您可以通过单击“查找最大值”然后将find的高度增加1并单击“设置高度”。 一些例子（Win7 / 64）： Chrome (14.0) : 134,217,726 px Safari (5.1) : 134,217,726 px IE (9.0) : 10,737,418 px FF (7.0.1) : 17,895,697 px WebKit产生相同的结果并不令人惊讶，我想 – 更令人惊讶的是，IE和FF是如此不同。 有没有更好的办法？ 你在32位系统中得到不同的结果吗？ – EDIT：更新小提琴停止在10,000,000,000（并更快）为Opera。 这是很多像素。
使用字体大小百分比？
我最近阅读了一些有关调整字体大小的文章，大多数是使用px作为不可饶恕的犯罪（好吧，也许不是那么糟糕，你明白了），因为它在旧的浏览器中不能正确resize。 我真的想拥有一个我自己使用的标准，过去一直是px，因为它简单，易于理解，并且相当容易实现devise中指定的确切字体大小 – 但是现在我怀疑使用PX。 我最近在项目中使用了em，因为它需要使用jQuery进行文本大小调整function。 但是我发现这很令人沮丧，因为如果你有两个元素在一起，并且指定了em的大小（希望是有道理的） 所以我想知道使用％进行字体大小调整，我已经看到一些大的网站使用这种技术（即雅虎），从我的理解来看，它似乎具有所有的优点，而没有令人难以置信的烦人放大的东西。 所以简而言之，我只是想知道在CSS中使用％进行字体大小是否有问题？ 在字体大小调整方面比使用PX更好吗？ 有什么明显的缺点？ 道歉，如果在问题之前blurb是一点点：/我还是习惯整个质量保证的事情
将光标设置为<symbol>元素
我有一个HTML符号 <symbol id="arrow" viewBox="0 0 8.4666659 8.4666659"> <g transform="translate(0,-288.53334)"> <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 0.17215798,288.70836 8.05225192,8.04935"></path> <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 8.2221335,293.64243 0.00228,3.11528 -3.1283502,2.2e-4"></path> </g> </symbol> 我想用作光标。 我熟悉如下通过JQuery更改光标： body.css('cursor', `wait`); 但是我怎样才能做到这一点<symbol>元素？
设置overflow-x：hidden添加一个垂直滚动条
当我指定overflow-x: hidden在水平和垂直溢出的元素上时，除了隐藏水平溢出的内容之外，元素还获得垂直滚动条。 我已经尝试添加overflow-y: visible ，甚至只是overflow: visible ，没有任何效果。 我误解了这些属性呢？ 我认为overflow-x应该不会影响垂直溢出。 这发生在我试过的每个浏览器上。 这是一个演示效果的片段。 我正在使用<pre>标记，因为它们是创build溢出内容的简单方法，但似乎会发生任何标记。 pre { height: 40px; width: 150px; margin-bottom: 50px; /* We need this so they don't overlap. */ } #x-hidden { overflow-x: hidden; } #y-visible { overflow-x: hidden; overflow-y: visible; } #visible { overflow: visible; overflow-x: hidden; } <pre> Lorem ipsum dolor sit amet, […]
如何缩小JS或CSS的dynamic
如何在运行/运行时缩减JS和CSS，这样，如果在运行时/运行时将原始代码结构缩小，我就可以将原始代码结构保留在服务器中。
