我正面临一个类似的问题(但不一样,请耐心等待)在html head中的Conditional-rendering css中描述的问题
我也"懒洋洋地"加载样式表,从我在控制器的最开始初始化的范围变量中获取文件名:
<link rel="stylesheet" data-ng-href="css/{{ filename }}.css" />
正如我正在使用ng-href(这里的data-形式),我确实避免了不需要的请求,例如:
http://localhost/css/%7B%7B%20filename%7D%7D.css
但这一切仍然很快发生,我几乎每次都会得到这个:
http://localhost/css/.css
这似乎意味着请求火灾之间的时刻,当角去除其自己的标记,目前它用正确的值替换它(这是这样,片刻之后,然后我的样式表正确加载).我估计它甚至不可能......!？
我想我可能filename太晚了为范围变量提供了一个值,但正如我所说,这是我在控制器中做的第一件事:
angular.module('myControllers', [])
.controller('TestCtrl', ['$scope', function($scope) {
$scope.filename = 'test';
// some more code...
}]);
我正在使用Angular 1.1.5; 有什么我可以做的吗？这不是什么大不了的事,但如果我能解决它仍然会更好.
编辑:根据要求提供完整的代码.我不会包含页面模板,因为它们与问题无关.
index.html:
<!DOCTYPE html>
<html lang="en" data-ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>My App</title>
<link rel="stylesheet" data-ng-href="/assets/css/{{ filename }}.css" />
</head>
<body>
<div id="app" class="app" style="display: none;" data-ng-view></div>
<script src="/assets/js/lib/angular/angular.min.js"></script>
<script src="/assets/js/app/app.js"></script>
<script src="/assets/js/app/controllers.js"></script> …您可能知道,如果您要使用:before和/或:after伪元素而不在其中设置文本,您仍然必须声明content: '';它们以使它们可见.
我刚刚将以下内容添加到我的基本样式表中:
*:before, *:after {
content: '';
}
......所以我不必再进一步申报了.
除了*选择器是反性能的事实,我知道(让我们说以上是一个例子,我可以找到一个更好的方法来声明这个,比如列出标签),这真的很慢事情发生了？我在目前的项目中没有注意到任何东西,但我想确保在我将它坚持到我的基本样式表之前使用是安全的,我将用于每个项目......
有没有人测试过这个？你有什么话要说的？
(顺便说一句,我 确实知道正确的语法CSS3采用双分号(::before,::after),因为这些都是pseudoelements,而不是伪类).
我有一个从Illustrator导出的SVG文件(交互式世界地图),我直接包含在网站的每个页面中.
这张地图有两个形状适用于每个大陆:一个完整的(用黑色填充),另一个使用一个模式(每个区域都有一个不同的形状,充满黑色条纹).单击一个大陆时,"完整"形状的不透明度设置为零,因此可以看到剥离的形状.
我的问题是当我在另一个URL而不是域根目录时,剥离区域无法正确显示.在Firefox上,它们显然是不可见的; 在Chrome上,他们完全充满黑色,就像他们的对手一样.
我很确定它与我引用条纹图案的事实有关url(#SVGID_n_)(再一次,它已经在Illustrator中生成了这样,我真的不关心优化它).但是由于SVG直接注入我的页面,它应该能够找到引用的模式,无论URL.我应该修复什么才能使其在每个页面上都能正常工作？
主页,一切按预期工作:http://lesjeteursdencre.fr 另一页,发生错误的地方:http://lesjeteursdencre.fr/2
要查看它,请点击底部带有脉动箭头的小行星,这将显示地图,然后单击任何大陆.
以下是一次问题的代码示例:
svg
<g id="europe-rayures">
<g>
<pattern id="SVGID_1_" xlink:href="#Nouveau_motif_4" patternTransform="matrix(1 0 0 1 45.2388 -5)"></pattern>
<path fill="url(#SVGID_1_)" d="..." />
</g>
</g>
注意:到目前为止,我在Firefox和Chrome(都在Linux上)上进行了测试.根据您的浏览器可能存在其他不相关的视觉问题,请忽略它们,因为我的测试尚未完成.
我在处理网页设计时遇到了一个问题,尝试将半透明(RGBa)边框颜色应用于元素似乎无法正常工作.你得到一个不透明的边框.这是一个CSS示例:
header > div form {
width: 229px;
background: url('img/connexion.png') no-repeat;
position: absolute;
top: 0px;
right: 0px;
text-align: center;
}
header > div form > p:first-child {
color: #1B2E83;
font-size: 16px;
font-weight: bold;
margin-top: 31px;
}
header > div form input[type=email], header > div form input[type=text], header > div form input[type=password] {
width: 140px;
height: 20px;
border: 2px solid rgba(0,0,0,0.14);
}
预期行为:灰色透明边框.我在同一页面上的另一个元素上尝试了它,它完美无缺.
实际行为:灰色边框.就这些.RGBa值似乎在某种程度上被解释为给定的颜色是黑色,结果是灰色的,但它根本不是透明的.
测试:Firefox 8.0,Chrome 16.0.912.63
因为它发生在Webkit和Gecko上,也许有些事我做错了...我试图删除位置:绝对容器,删除背景图像(这是一个透明的PNG)......没有改变.
css ×3
angularjs ×1
css-content ×1
css3 ×1
fill ×1
html ×1
javascript ×1
path ×1
performance ×1
rgba ×1
svg ×1
url ×1