小编Bau*_*umr的帖子
我可以阻止100%宽度文本框扩展到容器之外吗？
让我说我有一个文本框,我想填补整行.我会给它一个这样的风格:
input.wide {display:block; width: 100%}
这会导致问题,因为宽度基于文本框的内容.文本框默认具有边距,边框和填充,这使得100%宽度的文本框大于其容器.
例如,在右边:
有没有办法让文本框填充其容器的宽度而不扩展到它之外？
这是一些示例HTML来显示我的意思:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
#inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
input.wide {display:block; margin: 0px}
input.normal {display:block; float: right}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
如果运行此操作,您可以通过查看"普通"文本框看到"宽"文本框伸出容器."普通"文本框浮动到容器的实际边缘.我正在尝试使"宽"文本框填充其容器,而不像"普通"文本框那样扩展到边缘之外.
推荐指数
解决办法
查看次数
从Illustrator导出Web的SVG的最佳设置？
我希望在网站上使用SVG徽标 - 使其在所有设备的响应式设计上看起来很棒.
但由于存在问题,我希望尽可能多地支持设备和浏览器.负载速度也是一个重要的考虑因素.Adobe Illustrator中的导出设置如何适合所有这些？
在Illustrator中,有几种SVG导出选项.首先,哪个SVG配置文件最好？
我认为SVG Tiny的文件较小？许多设备支持SVG Tiny吗？最重要的区别是什么？(无需阅读这个W3怪物.)
其次,我认为图像定位的最佳选择是"链接"？(见感叹号后的说明.)
或者,浏览器如何支持"嵌入"选项？
谢谢!
PS将有一个后备alpha-PNG选项,但我希望尽可能支持SVG.(想想看,一个后备选项 - 就像JPG一样 - 在这种情况下可能是最好的服务,因为alpha-PNG本身需要一个旧IE的解决方案.)
更新:还可以配置更多选项.我不使用文本,所以我看到的唯一相关的是小数位.对于徽标,显示为最大200x200px(在Retina显示屏上为400x400px)的东西,"3"是最佳设置吗？或"2"以最小化文件大小？
推荐指数
解决办法
查看次数
CSS媒体查询重叠的规则是什么？
我们如何准确地隔离媒体查询以避免重叠？
例如,如果我们考虑代码:
@media (max-width: 20em) {
/* for narrow viewport */
}
@media (min-width: 20em) and (max-width: 45em) {
/* slightly wider viewport */
}
@media (min-width: 45em) {
/* everything else */
}
在所有支持的浏览器中,准确的20em和45em会发生什么？
我见过人们使用:像799px然后800px的东西,但屏幕宽度为799.5像素呢？(显然不是常规显示器,而是视网膜显示器？)
考虑到规格,我对这里的答案最感兴趣.
推荐指数
解决办法
查看次数
是否有必要使用— 和– 在XHTML或HTML5？
似乎最好使用&转义,而不是简单地键入&符号(&).
但是,在WordPress或硬编码网站等CMS上写博客文章时,我们是否应该使用X/HTML字符实体引用破折号和其他常见的印刷字符？
例如:
–是一个短划线( - )
—是一个短划线( - )
如果不这样做会有什么风险？
escaping character character-encoding special-characters html-escape-characters
推荐指数
解决办法
查看次数
如何在Apple Maps或Google Maps中打开链接？
如何才能使网站上的链接首先导致新版Google Maps for iOS应用中的位置,如果不可用,则还原为Apple Maps？
目前,默认功能是maps.apple.com将在iOS上的Apple Maps和其他设备上的Google Maps中打开链接.
因为谷歌地图似乎是大多数用户的首选,所以在iOS上反转这一点会很好.
推荐指数
解决办法
查看次数
CSS定位填充容器:宽度与左/右？
考虑到:
- 对于绝对位于相对定位的容器内的元素.
- 如果希望元素填充容器的宽度.
- 该元素也是底部对齐的.
最大化浏览器兼容性是否最好为元素设置width像素,或者只使用left和right？
任何方法都需要注意任何常见的错误？
显然,使用left: 0;和right: 0;会使代码在图像的宽度或填充要改变的情况下更容易管理,但没有任何缺点,其中width: 300px将有利于呢？
推荐指数
解决办法
查看次数
图像"显示:阻止"的缺点？
img使用display: blockCSS属性从内联块元素转换为块对象有什么缺点吗？
大多数时候,我希望它们成为block元素.inline我失去的任何有用的方面？(也许我没有看到一些有用的东西？)
是否应该将所有图像block默认转换为元素？为什么根据规范它们是内联块元素？
PS我想通过定位和浮动以及周围元素来考虑布局.
推荐指数
解决办法
查看次数
Facebook API是否允许自动更改旧帖子可见性？
换句话说,是否有一个API允许Facebook用户更改他们的帖子(通过第三方应用程序),这些帖子比指定的日期更早,从"朋友"列表可见到另一个,例如"仅"我"或"关闭朋友"？
人们越来越多地将他们的专业和熟人联系人添加为Facebook好友.
限制帖子的可见性是有意义的 - 以迎合不同的受众.
展望未来,这很容易,因为Facebook提供了充足的控制:
但问题是,除非你从一开始就这样设置,否则没有现有功能可以自动将所有旧墙帖和照片的可见性更改为"仅限我","关闭朋友"等等.
这提出了一个问题,因为早在2004年12月就手动逐个浏览帖子是不可行的:
在介绍时间轴时,Facebook确实提供了将所有帖子从"公共"更改为"朋友"的功能:
但是,现在还不可能将超过特定日期的帖子的观众更改为"仅限我","亲密朋友","朋友;除了:熟人"等.
但是,很明显,这样做的基本功能就在某处.
Facebook API中是否有可用于为此构建应用程序的功能？如果是这样,哪个？
facebook facebook-graph-api facebook-javascript-sdk facebook-c#-sdk facebook-apps
推荐指数
解决办法
查看次数
为什么正则表达式匹配1到10写为[1-9] | 10而不是[1-10]？
为什么正则表达式匹配1到10之间的数字通常写如下？
[1-9]|10
代替:
[1-10]
或这个:
[1-(10)]
推荐指数
解决办法
查看次数
如何避免媒体查询重叠？
级联是使CSS特别强大的原因.但在媒体查询的情况下,重叠可似乎有问题.
考虑以下CSS(CSS媒体查询重叠的连续规则):
/* Standard - for all screens below 20em */
body { color: black; font-size: 1em; }
/* Query A - slightly wider, mobile viewport */
@media (min-width: 20em) and (max-width: 45em) {
body { color: red; } /* supposed to be unique for this width */
}
/* Query B - everything else */
@media (min-width: 45em) {
body { font-size: larger; } /* because viewport is bigger */
}
因此,当屏幕正好是45em宽时,45em处的重叠将 …
推荐指数
解决办法
查看次数
标签 统计
css ×6
css3 ×2
html ×2
image ×2
apple-maps ×1
character ×1
css-float ×1
css-position ×1
escaping ×1
facebook ×1
fluid-layout ×1
google-maps ×1
ios ×1
positioning ×1
regex ×1
svg ×1
url-scheme ×1
width ×1