我绝对用我这个非常令人沮丧和奇怪的CSS问题撕掉了我所有的头发.
我正在使用Bones样板制作一个网站,它一直很棒,直到现在......
它使用流体网格系统,我最近尝试创建一个简单的画廊,我已经制作成一个网格(4个图像,每个图像包裹在一个四分之一列,第一个/最后一个类添加到第一个/最后一个图像).
如果将鼠标悬停在图像上(由于某些原因,前三个图像特别明显),您会注意到由于某些原因,它们会将宽度改变一两个像素.图像设置为max-width:100%,我感觉这是某种罪魁祸首,因为如果你给图像一个"固定"的宽度(例如.gallery-icon img {max-width:165px;},它解决了问题,但作为一个流畅的网格系统,我不能下去那个路线,因为如果调整浏览器大小,图像保持165px,即使我根据媒体设置了4种不同的宽度,在介质尺寸之间,图像也不会正确对齐.
如果它不是transition效果问题(如果我transition关闭,图像较低opacity,但没有动画),它会工作,因为我希望它工作:(
请帮帮我们!
这是一个空的演示站点,它运行了骨架样板,只不过是页面上的库.如果你看到震动问题,请告诉我.
(我无法在jsfiddle上重新创建它,所以我将它安装在我躺在hehe周围的旧域上)
编辑:我刚刚注意到问题似乎发生在宽度和高度都比div大的图像上.图像1 + 3是这个,他们有错误,而图像2,4似乎没问题？和图像2 + 4的高度比div小.....但即使我将图像设置为最大高度,问题仍然存在.
EDIT2:添加了一个快速视频来显示问题(最新的Firefox和Chrome)http://www.youtube.com/watch?v=uL81hLfMvvw
我正在使用Google Web Font的PT-sans
font-family: 'PT Sans',Arial,serif;
但它在Chrome和Firefox中看起来有所不同
有什么我需要添加,以便它在所有浏览器中看起来相同吗？
我是WordPress的新手,刚刚安装了3.3.1版本.
我做了一些关于这个问题的谷歌搜索,并找到了一些答案,但它们与版本2.7相关,并且是2-3岁.
基本上,该wp_title功能在每个页面上工作正常,除了我的主页,它返回空白,我没有任何标题.我可以硬编码标题,但我宁愿不这样做.
有罪的代码行:
<title><?php wp_title ( '| So Fresh n\' So Clean', true,'right' ); ?></title>
我找不到有关3.3.1中发生的这个问题的任何事情,所以很清楚我做错了什么.
有没有办法创建一个css框阴影,其中无论模糊值如何,阴影只出现在所需的边上？
例如,如果我想在左侧和右侧创建一个阴影,而在顶部或底部没有阴影.div没有绝对定位,其高度由内容决定.
- 编辑 -
@ricebowl:谢谢你的回答.也许您可以帮助创建一个完整的解决方案来解决我对您的解决方案的回复中陈述的问题...我的页面设置如下:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
和CSS这样:
#container {width:960px; min-height:100%; margin:0px auto -32px auto;
position:relative; padding:0px; background-color:#e6e6e6;
-moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8),
3px 0px 5px rgba(0,0,0,.8);}
#header {height:106px; position:relative;}
#content {position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer {height:32px; padding:0px; position:relative; width:960px; margin:0px
auto 0px auto;}
我需要获取当前的插件目录
[wordpress_install_dir]/wp-content/plugins/plugin_name
(如果getcwd()从插件中调用,则返回[wordpress_install_dir],安装的根目录)
感谢帮助
我正在构建一个使用该-webkit-transform: rotateY属性翻转卡片的简单示例.
它在几天前工作正常,但突然间它停止工作.效果仍然有效,但当我将鼠标悬停在卡片上时,正面会消失,使背面可见.为此,我正在使用该-webkit-backface-visibility: hidden物业.但它似乎不再适用于chrome(稳定版和夜间版本)
这是代码,以防我做了可怕的坏事
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Card Flip Using CSS</title>
<style type="text/css">
body {
background-color: #3d994a;
}
h1 {
font-size: 30pt;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
display: block;
text-shadow: 1px -1px 0px #4E4E4E;
}
#container {
-webkit-perspective: 1000;
}
.card {
position: relative;
width: 286px;
height: 392px;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0.5s linear;
}
#container:hover .card{
-webkit-transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%; …IE filter和-ms-filter属性之间有什么区别？如果我使用它,我应该同时使用它们吗？他们做同样的事情,但每个只在某些版本的IE上工作吗？
我有一个mp4视频,我想在IE9中使用HTML5 <video>标签播放.我将MIME类型添加到IIS 7中,因此如果我浏览http://localhost/video.mp4它在Chrome和IE9中播放但在HTML5中播放,则Chrome会播放HTML视频.这是代码:
<html>
<body>
<video src="video.mp4" width="400" height="300" preload controls>
</video>
</body>
</html>
有任何想法吗？
谢谢
更新:
在Firefox 5.0中尝试过相同的文件但它也无法正常工作,只有Chrome才能播放mp4视频.
希望你能帮我...
我想要一个有facebook元标记的页面,例如:
<meta property="og:title" content="TITULO" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://profile.ak.fbcdn.net/hprofile-ak-snc4/277072_61646342824_993843268_n.jpg" />
<meta property="og:url" content="http://www.clarin.com" />
问题是,我没有显示我在页面的元标签中定义的描述,标题和图像,而是使用我在中定义的网址生成facebook like框og:url.我正在阅读文档,似乎它应该是这样的.
但我仍然希望像我的页面的元标签生成的facebook like框,而不是使用定义的url og:url.
可能吗？有人做过吗？
我想知道是否有办法让Sublime Text 2自动完成HTML属性,如Aptana？