Questions tagged «css»

Highcharts图表选项backgroundColor:'transparent'显示为黑色IE 8 histogram = new Highcharts.Chart({ chart: { renderTo: 'histogram', defaultSeriesType: 'bar', backgroundColor:'transparent' } 这在I.E 9其他平台上都可以正常运行，但在IE 8和Safari上无法运行，任何人都不知道为什么？

81 css  internet-explorer-8  cross-browser  highcharts 

我正在创建跨浏览器兼容的旋转（ie9 +），并且在jsfiddle中有以下代码 $(document).ready(function () { DoRotate(30); AnimateRotate(30); }); function DoRotate(d) { $("#MyDiv1").css({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', '-o-transform':'rotate('+d+'deg)', '-ms-transform':'rotate('+d+'deg)', 'transform': 'rotate('+d+'deg)' }); } function AnimateRotate(d) { $("#MyDiv2").animate({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', '-o-transform':'rotate('+d+'deg)', '-ms-transform':'rotate('+d+'deg)', 'transform':'rotate('+d+'deg)' }, 1000); } CSS和HTML非常简单，仅用于演示： .SomeDiv{ width:50px; height:50px; margin:50px 50px; background-color: red;} <div id="MyDiv1" class="SomeDiv">test</div> <div id="MyDiv2" class="SomeDiv">test</div> 使用时旋转有效，.css()但使用时无效.animate(); 为什么会这样，有没有办法解决？ 谢谢。

81 jquery  css  rotation  jquery-animate 

每当在Chrome中触摸应用了cursor：pointer属性的Div时，就会出现一个蓝色突出显示。我们如何摆脱它？ 我尝试了以下方法： -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 但是它们不会影响按光标时的蓝色突出显示。

81 html  css  mobile  touch  highlight 

我在容器中有两个元素，它们通过使用flex box并排放置。在第二个元素（.flexbox-2）上，我在CSS中设置它的高度。但是，第一个元素（.flexbox-1）将与的高度匹配.flexbox-2。如何停止.flexbox-1匹配的高度.flexbox-2，而只保留其自然高度？ 这是我到目前为止所拥有的（也可以作为jsFiddle使用） .container { display: -webkit-flex; -webkit-flex-direction: row; } .flexbox-1 { -webkit-flex: 1; border: solid 3px red; } .flexbox-2 { -webkit-flex: 2; border: solid 3px blue; height: 200px; margin-left: 10px; } <div class="container"> <div class="flexbox-1">.flexbox-1</div> <div class="flexbox-2">.flexbox-2</div> </div> 运行代码段隐藏结果展开摘要

81 html  css  flexbox 

我的应用程序正在使用JSoup下载留言板页面的HTML（在这种情况下，它是一个包含给定线程帖子的页面）。我想使用此HTML，剔除不需要的项目，并应用自定义CSS对其进行样式设置使其在WebView中“可移动”。 我应该在处理样式时将样式注入HTML中（因为无论如何都会处理样式），或者是否有很好的方法将CSS文件添加到我的应用程序资产中并简单地引用它。我认为后者将是理想的，但不确定如何去做。 我在WebView的loadDataWithBaseURL中看到了一些提示，您可以引用本地资产，但不确定如何使用它。

81 android  html  css  webview 

之间有什么区别 jQuery('#id').show() and jQuery('#id').css("display","block") 和 jQuery('#id').hide() and jQuery('#id').css("display","none")

81 javascript  jquery  css 

使用CSS媒体查询，您可以用于max-device-width定位设备宽度（例如iPhone或Android设备）和/或max-width定位页面宽度的。 如果使用max-device-width，则在更改桌面上浏览器窗口的大小时，CSS不会更改，因为您的桌面不会更改大小。 如果使用max-width，则在更改桌面上浏览器窗口的大小时，可能会显示面向移动的样式，例如触摸友好的元素和菜单等。 现在已不建议定位特定的浏览器（和设备？），并​​且您应该对定位的对象有所了解。这也适用于媒体查询吗？ 为什么要针对一个目标呢？推荐哪一个？ 这是我在生产网站上使用的媒体查询的示例： @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) { /* Change a menu to fit the screen better, etc... */ } 我倾向于同时使用max-device-width和max-width。

81 css  responsive-design  media-queries 

我想给我的div和textarea一些填充。当我这样做时，它将增加元素的大小，而不是缩小元素内部的内容区域。有什么方法可以实现我的目标？

81 html  css 

最好使用更少的CSS样式将CSS样式包装为不同的分辨率。 我想做类似的事情： footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } 最后应该是这样的结果： footer { width: 100%; } @media screen and (min-width: 768px) { footer { width: 768px; } } @media screen and (min-width: 992px) { footer { width: …

81 css  responsive-design  less  media-queries 

我不明白为什么这些div的边距重叠。 .alignright {float: right} #header .social {margin-top: 50px;} #header .social a {display: inline-block;} #header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;} #header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;} #header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;} #header .contact span {color: …

81 html  css  margins 

我<span>在模块标题中使用标签，例如 <span>Categories</span>. 我用CSS指定跨度的背景颜色/图像，宽度和高度。 但是跨度的宽度取决于其内容/文本。 因此，如果我这样做<span></span>，而在CSS中只有背景图像/颜色，则什么也不会出现。 当然，我希望出现一些东西。 我该如何解决？

81 css 

假设我有这样的标记：http : //jsfiddle.net/R8eCr/1/ <div class="container"> <div class="column"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="column"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="column"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> ... </div> 然后是CSS .container { display: table; border-collapse: collapse; } .column { float: left; overflow: hidden; width: 120px; …

81 css 

我正在尝试使父div仅与子div一样宽。自动宽度使父div适合整个屏幕。子div的宽度取决于其内容，因此我需要父div进行相应调整。 <div style='width:auto;'> <div style="width: 135px; float: left;"> <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4> <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;"> <dd style="white-space: nowrap;">1</dd> <dd style="white-space: nowrap;">2</dd> </dl> <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4> <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;"> <dd style="white-space: nowrap;">1</dd> <dd style="white-space: nowrap;">2</dd> </dl> …

81 html  css 

我在网页上使用了Font Awesome，并且我想在:before伪元素。 根据文档/备忘单，我必须键入才能获得此字体，但是它不起作用。我认为这是正常的，因为中不支持HTML实体:before。 所以我在Google上搜索了一下，发现如果要在中显示HTML实体:before，则必须使用转义的十六进制引用。 所以我正在寻找十六进制参考但一无所获。我认为这是因为这些都是“私有使用”的值，无论这意味着什么。 有什么办法可以使其正常工作:before吗？

81 html  css  unicode  encoding  icons 

我想为HTML页面中的每个元素设置最小字体大小。 例如，如果某些元素的字体大小小于12px，则它们将变为12px。 但是，如果某些元素的字体大小为12px，则它们不会改变。 有什么办法用CSS做到吗？

81 html  css  font-size