程序设计 css

12

我有以下代码： <select> <option value="c">Klassen</option> <option value="t">Docenten</option> <option value="r">Lokalen</option> <option value="s">Leerlingen</option> </select> 在iPhone上的全屏网络应用中运行。从此列表中选择某项时，iPhone会放大select-element。并且在选择某些内容后不会缩小。我该如何预防？还是缩小？

84 javascript css html iphone-web-app

13

机身高度100％显示垂直滚动条

出于好奇，考虑下面的示例，为什么在#container div上留有空白会导致垂直滚动条出现在浏览器中？容器的高度比设置为100％的主体高度小得多。我已将#container以外的所有元素的填充和边距设置为0。请注意，我故意省略了#container div上的绝对定位。在这种情况下，浏览器如何计算身体的高度，边距对其有何影响？ <!DOCTYPE html> <html> <head> <style type="text/css"> * { padding:0; margin:0;} html, body { height:100%; } #container { padding:10px; margin:50px; border:1px solid black; width: 200px; height: 100px; } </style> </head> <body> <div id='container'> </div> </body> </html> JSFiddle上的示例

84 html css

12

HTML iframe-禁用滚动

我的网站上有以下iframe： <iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe> 它具有滚动条。如何摆脱它们？

84 html css iframe

5

CSS：如何相对于父高设置图像大小？

我试图弄清楚如何调整图像的大小，以使其保持高宽比，但是要调整大小，直到图像的高度与包含div的高度匹配为止。我有这些非常大和很长的图像（屏幕快照），我想将它们放入200px宽，180px高的div中以进行显示，而无需手动调整图像大小。为使外观更好看，图像的侧面需要溢出并用包含的div隐藏。这是我到目前为止所拥有的： http://jsfiddle.net/f9krj/2/ 的HTML <a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg"> <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" /> </a> 的CSS a.image_container { background-color: #999; width: 200px; height: 180px; display: inline-block; overflow: hidden; } a.image_container img { width: 100%; } 如您所见，图像父容器上显示灰色，根本不显示灰色。为了完全填充该容器，宽度需要在两侧均等地溢出。这可能吗？是否也可以考虑太高的图像？

84 html image css

7

脉动CSS动画

我正在仅使用CSS制作动画心脏。我希望它脉动2次，稍作休息，然后再次重复。我现在所拥有的： small ==> big ==> small ==> repeat animation 我要做什么： small ==> big ==> small ==> big ==> small ==> pause ==> repeat animation 我该怎么做？我的代码： #button{ width:450px; height:450px; position:relative; top:48px; margin:0 auto; text-align:center; } #heart img{ position:absolute; left:0; right:0; margin:0 auto; -webkit-transition: opacity 7s ease-in-out; -moz-transition: opacity …

83 html css animation

13

在CSS中使用像素是否不好？[关闭]

从目前的情况来看，这个问题不适合我们的问答形式。我们希望答案能得到事实，参考或专业知识的支持，但是这个问题可能会引起辩论，争论，民意调查或扩展讨论。如果您认为此问题可以解决并且可以重新提出，请访问帮助中心以获取指导。 8年前关闭。在兼容性方面，在CSS中使用像素数而不是百分比是否不好？较低的分辨率怎么样？可以在1到100的范围内使用它们吗？

83 css pixels screen-resolution resolution-independence

7

将固定div设置为父容器的100％宽度

我有一个带有一些填充的包装，然后有一个浮动的相对div，其宽度为百分比（40％）。在浮动相对div内，我有一个固定的div，我希望它的大小与它的父级相同。我知道从文档流中删除了一个固定的div，因此忽略了包装器的填充。的HTML <div id="wrapper"> <div id="wrap"> Some relative item placed item <div id="fixed"></div> </div> </div> 的CSS body { height: 20000px } #wrapper { padding: 10%; } #wrap { float: left; position: relative; width: 40%; background: #ccc; } #fixed { position: fixed; width: inherit; padding: 0px; height: 10px; background-color: #333; …

83 html css

3

编写HTML电子邮件时的最佳做法和注意事项

已关闭。这个问题是基于观点的。它当前不接受答案。想改善这个问题吗？更新问题，以便通过编辑此帖子以事实和引用的形式回答。 11个月前关闭。改善这个问题我从事网站开发已有十多年了，但很快发现我为电子邮件客户端开发时，许多用于Web开发的习惯都没有用。这给我带来了极大的挫败感，所以我想问一个问题：对于像我这样不时发现自己为gmail，Outlook等进行设计的其他人，最佳实践和必要的注意事项是什么？示例： <style>...</style> vs内联CSS。简而言之：是什么从网络世界转移到了电子邮件世界，而没有呢？

83 html css html-email

8

jQuery的UI日期选择器更改Z索引

这个问题很简单，尽管我很难弄清楚如何解决它。我正在使用jQuery-ui datepicker以及自定义的“ ios样式开/关切换”。此切换开关使用一些绝对定位的元素，这些元素当前显示在我的日期选择器顶部。请参阅下面覆盖7月6日的丑陋圈子... 做这件事的肮脏方法（至少是imo）是在我的一个样式表中编写样式，但是我宁愿在启动选择器时使用一些javascript来完成此工作。我已经尝试过了 $('.date_field').datepicker(); $('.date_field').datepicker("widget").css({"z-index":100}); 和 $('.date_field').datepicker({ beforeShow: function(input, inst) { inst.dpDiv.css({"z-index":100}); } }); 但似乎每次启动日期选择器时z-index都会被覆盖。任何帮助表示赞赏！

83 javascript jquery css jquery-ui datepicker

5

通过CSS将图像添加到文本的左侧

如何通过CSS将图像添加到某些文本？我有这个： <span class="create">Create something</span> 我想通过使用CSS在其左侧添加一个16x16图像。这是可能的还是我应该像这样手动添加此图像： <span class="create"><img src="somewhere"/>Create something</span> 我宁愿不必手动更改所有位置，这就是为什么我想通过CSS进行更改。谢谢！

83 css

12

选择选项填充不适用于Chrome

选择选项填充不适用于Chrome <style> select option { padding:5px 0px; } </style> <select> <option>1</option> <option>2</option> <option>3</option> </select>

83 html css

12

CSS Media Query-软键盘打破了CSS定位规则-替代解决方案？

我正在使用多个平板电脑设备-均为Android 和iOS。目前，对于所有平板电脑，我都有以下分辨率差异。 1280 x 800 1280 x 768 1024 x 768（显然是iPad） -iPad没有此问题应用基于设备方向的样式的最简单方法是使用以下语法来使用媒体查询的方向。 @media all and (orientation:portrait) { /* My portrait based CSS here */ } @media all and (orientation:landscape) { /* My landscape based CSS here */ } 在所有平板电脑设备上都可以正常工作。但是，问题是，当设备处于纵向模式并且用户点击任何输入字段（例如，搜索）时，软键盘会弹出-这会减小网页的可见区域，并迫使其以基于横向的CSS呈现。在Android平板电脑设备上，这取决于键盘的高度。因此，最终该网页看起来很破损。因此，我不能使用CSS3的定向媒体查询来基于定向应用样式（除非有更好的媒体查询来定向定向）。这是一个小提琴http://jsfiddle.net/hossain/S5nYP/5/，它可以进行模拟-对于设备测试，请使用完整的测试页-http://jsfiddle.net/S5nYP/embedded/result/ 这是从演示页面获取的行为的屏幕截图。因此，除了解决此问题外，还有什么替代方法，如果基于本机CSS的解决方案不起作用，我愿意接受基于JavaScript的解决方案。我在http://davidbcalhoun.com/2010/dealing-with-device-orientation上找到了一个代码段，该代码段建议在上面添加类并以此为目标。例如： <html class="landscape"> <body> <h1 class="landscape-only">Element Heading - …

83 android css media-queries

7

如何对齐标签和文本区域？

我的代码最终像： XXXXX XXXXX Description: XXXXX 我想要： XXXXX Description: XXXXX XXXXX “描述”有时跨越多行。码： <p class="DataForm"> <label>Blah blah blah Description:</label> <asp:TextBox ID="txtBlahblahblahDescription" runat="server" TextMode="MultiLine" Rows="8" Columns="50"></asp:TextBox><br/> </p> CSS： .DataForm { } .DataForm label { display: inline-block; font-size: small; margin-left: 5px; width: 5%; min-width: 60px; } .DataForm input { margin-right: 9px; display: inline-block; …

83 html css asp.net

4

@ -moz-document url-prefix（）有什么作用？

在西蒙·科里森的新老自适应网页设计，在CSS中，有几个的声明是这样的： @-moz-document url-prefix() { .fl { float:left; margin:12px 4px 0 0; padding:0; font-size:65px; line-height:62%; color:#ba1820; } .fs { float:left; margin:12px 4px 10px 0; padding:0; font-size:65px; line-height:62%; color:#ba1820; } } 这实际上是做什么的？我已经用Google搜索了@ -moz-document url-prefix（），并找到了在Userchrome（而非标准网站样式表）中使用它的参考。它通常有一个URL作为参数传入，然后将声明的内容限制为该URL。但是，在Colly的站点上，没有传递任何参数。这将表明声明是在当前URL或任何URL上操作的，不是吗？那么，我们在这里看到的是使用某些规则定位仅Mozilla浏览器的方法吗？

83 css firefox browser

9

将：hover更改为触摸/单击移动设备

我环顾四周，但找不到我想要的东西。我的页面上目前有一个CSS动画，它是由：hover触发的。当使用媒体查询将页面调整为宽度超过700px时，我希望将其更改为“单击”或“触摸”。这是我目前所拥有的：http : //jsfiddle.net/danieljoseph/3p6Kz/ 如您所见，：hover不能在移动设备上工作，但我仍然想确保单击即可，而不是将其悬停。如果可能的话，我宁愿使用CSS，但也对JQuery满意。我感觉这很容易做到，但我只是缺少一些非常明显的东西！任何帮助，将不胜感激。这是CSS动画： .info-slide { position:absolute; bottom:0; float:left; width:100%; background:url(../images/blue-back.png); height:60px; cursor:pointer; overflow:hidden; text-align:center; transition: height .4s ease-in-out; -webkit-transition: height .4s ease-in-out; -moz-transition: height .4s ease-in-out; } .info-slide:hover { height:300px; }

83 css css-animations

Questions tagged «css»