标签: cross-browser
多列布局中的块元素 - 在Chrome/IE中填充问题
问题描述:
我有一个无序的项目列表,使用典型的ul- > li结构.我申请column-count:3了这个ul(以及前缀).它在Firefox中运行得很漂亮.在Chrome和IE11(它应该根据caniuse工作),它主要工作,但我遇到了奇怪的行为.看一下截图:
火狐:
铬:
如果你注意到,中间列在Chrome中被按下(IE11是相同的).在这两种情况下,浏览器似乎试图使前两列的高度相等.有没有办法告诉它尊重block物品？
码:
HTML:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
...
<li>List Item 20</li>
</ul>
CSS:
ul {
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
}
ul li {
display:block;
list-style-type:none;
padding:10px;
margin-bottom:10px;
border-left:solid 4px rgb(205,88,5);
background-color:rgba(0,0,0,0.1);
}
工作实例:
JSFiddle:http://jsfiddle.net/6cVqZ/
推荐指数
解决办法
查看次数
谷歌浏览器:零宽度表格单元占用空间
我有一张三人桌<td />.其中两个有width属性和风格0px.
中间<td />没有明确的width设定.
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="0" height="10" bgcolor="" style="background-color:#00ffff;height:10px;width:0px;"></td>
<td height="10" bgcolor="" style="background-color:#000;height:10px;"></td>
<td width="0" height="10" bgcolor="" style="background-color:#ff00ff;height:10px;width:0px;"></td>
</tr>
</tbody>
</table>
我希望这个中间<td />会占用整个空间(这就是Firefox和IE中发生的事情)
但是,在谷歌浏览器中,三者<td />都占用了相同的空间.
这是为什么？
2.这是Chrome中的错误吗？
3.有一个简单的解决方案吗？
推荐指数
解决办法
查看次数
基于容器元素在AngularJS指令内自动调整SVG大小
我在一个动态大小的元素中放置一个angular指令.该指令本身由一个SVG组成,该SVG是根据元素大小计算的.我试图使SVG自动调整大小并根据容器的大小重绘.
我最初尝试过这样的事情:
我-directive.js
angular
.module('myModule')
.directive('myDirective', function () {
return {
templateUri: 'path/to/my-directive-template.html',
...
};
});
我的指导性,template.html
<svg style="width: 100%; height: 100%; max-width: 100%; max-height: 100%">
...
</svg>
请注意该styleSVG元素的属性.这在Chrome中正确调整大小,但无法在Firefox中使用.另外,我仍然没有重新计算SVG内容的钩子.
我也尝试在函数中添加一个onresize处理程序,但是,JQLite 只支持在主窗口上.我无法使用,因为我的窗口大小没有变化.elementlinkonresizewindow.onresize
我试图在这里使用答案:AngularJS - 绑定到指令调整大小,但它们也没有给出所需的结果.
简而言之,这就是我想要做的:
- 父元素调整大小时,在指令内调整SVG元素的大小.
- 发生这种情况时,通过调用一些处理函数重新计算SVG内容.
我宁愿不以项目这一点上添加一个jQuery的依赖性.
推荐指数
解决办法
查看次数
重构Crossrider扩展代码
我使用Crossrider构建了我的扩展,目前我的所有代码都在extension.js文件中.但是,它在这个单片文件中变得越来越难以维护.有没有办法将我的代码拆分成单独的文件,仍然在我的扩展中使用它们？
因此,例如,如果我的extension.js文件的结构类似于以下示例,我希望函数f1和f2位于我可以加载到扩展中的单独文件中:
appAPI.ready(function($) {
init();
f1();
f2();
...
function init() {
// init code
...
}
function f1() {
//hundreds of lines of code
}
function f2() {
//hundreds of lines of code
}
...
});
javascript cross-browser include browser-extension crossrider
推荐指数
解决办法
查看次数
忽略了nowrap的Firefox文本溢出(Chrome工作)
我在这里创建了一个JSFiddle问题
这适用于Firefox v33和v33.1,但是在34-35中失败了.这适用于Chrome和IE11.它可能是Firefox中的一个错误,但我不确定.基本上我有HTML看起来像这样:
.container {
position: absolute;
width: 150px;
}
.innercontainer {
position: relative;
padding-right: 25px;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.outerwrapper {
display: block;
height: 24px;
text-align: center;
font-size: 10px;
line-height: 24px;
margin-bottom: 5px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
box-orient: horizontal;
-webkit-box-orient: horizontal;
flex-direction: normal;
-ms-flex-direction: normal;
-moz-flex-direction: normal;
-webkit-flex-direction: normal;
}
.wrapper {
flex: 1;
-ms-flex: 1 0 auto;
-moz-flex: 1;
-webkit-flex: 1;
-webkit-box-flex: 1;
display: -webkit-box; …推荐指数
解决办法
查看次数
浏览器如何比较URL进行缓存？
具体来说，URL的哪些部分用于比较。假设我在提供CSS样式表https://www.example.com/a/b/test.css与相应的HTTP报头cache-control，max-age等当用户进入到每个以下URL后，该人将担任缓存文件？
https://www.example.com/a/b/test.css
https://www.example.com/a/b/test.css?abc=123
https://www.example.com/a/b/test.css#abc=124
基本上，我要问的是，当浏览器决定是否使用缓存的资源时，是否比较URL字符串的“搜索”和“哈希”部分。此外，这种比较逻辑在浏览器之间是否是一致的，还是某些标准的一部分？
推荐指数
解决办法
查看次数
CSS翻转动画在Safari中不起作用
基于这篇优秀的博文,我在我正在研究的网络应用程序的页面上实现了一个翻转动画.起初我使用了博客帖子顶部提供的CSS类,但不幸的是,这在IE10中不起作用所以我开始使用CSS类作为解决方案,以便在IE10结束时提供它.博客文章.
我为这篇文章极大地简化了这个例子,但我的代码看起来像这样
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="flipper.css" rel="stylesheet">
<script src="js/jquery-1.11.2.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="flip-container" id="flipFrame">
<div class="flipper">
<div class="front">
FRONT CONTENT
<br>
<button onclick="flipFrame()">
Start <b>here</b>
</button>
</div>
<div class="back">
BACK CONTENT
</div>
</div>
</div>
</body>
<script>
function flipFrame(){
document.querySelector("#flipFrame").classList.toggle("hover")
}
</script>
CSS:
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane …推荐指数
解决办法
查看次数
在Windows的Safari浏览器中100vh不起作用吗？
我正在建立以学习一些Web开发的网站的首页在我使用Safari浏览器测试过的所有浏览器（Windows）上均能正常运行。我有一个html步骤，这样我就可以将样式设置为100vw和100vh。在野生动物园中，它们的高度似乎为0；
<body>
<div id="wrapper">
<div class="main">
<section id="slide-one" class="slide"></section>
<section id="slide-two" class="slide"></section>
.
.
.
以及CSS的摘要：
.slide {
position: relative;
padding-top: 0px;
height: 100vh;
width: 100%;
box-sizing: border-box;
}
有什么想法我做错了吗？
推荐指数
解决办法
查看次数
第一个对象的"意外标识符"错误(仅限Safari)
当我在Safari中运行以下代码(并且只有Safari)时,Javascript将不会在浏览器中加载:
$(document).ready(function() {
let dataX = {
last: 100
};
let quotes = [{
quote: "I find it fascinating that...
我收到一条错误消息: SyntaxError: Unexpected identifier 'dataX'
当我注释掉dataX对象时,下一个对象会产生相同的错误:SyntaxError: Unexpected identifier 'quotes'似乎无论第一个对象是什么,它都会在Safari中引发错误.
该页面在一个简单的Bootstrap容器中显示随机引用.您可以在此处找到CodePen的链接.
到目前为止我尝试过的:
- 检查检查员和Google错误消息
- 在Chrome和Firefox中加载CodePen(可行)
- 验证HTML,并为JS使用linter
- 打开
index.html在Safari本地,用正确的<header>和<meta>标签,以及必要的引导和jQuery文件. - Google Stack Overflow内外的问题
- 注释掉不同的函数和对象,看它是否使页面工作
我怀疑问题不是错误消息所指的对象; 我也怀疑解决方案可能是微不足道的.但是,我完全难过了.任何线索将不胜感激.
推荐指数
解决办法
查看次数
SVG动画在Edge或IE中不起作用
我有一个选中标记的SVG动画，该动画可以在Safari，Chrome，Firefox等环境中使用，但在Edge和IE中则无法使用（惊讶）。
似乎SVG在那里，但是笔划没有显示。
据我所知，Edge和IE11都支持我正在尝试做的事情，并且使用了所有我能想到的前缀。
CSS / HTML：
.checkmark {
position: relative;
left: 50px;
z-index: 1;
opacity: 1;
width: 22px;
border-radius: 50%;
display: inline;
stroke-width: 6;
stroke: #fff;
stroke-miterlimit: 10;
margin: -4px -15px;
-webkit-box-shadow: inset 0px 0px 0px #fff;
box-shadow: inset 0px 0px 0px #fff;
-webkit-animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #fff;
fill: none; …推荐指数
解决办法
查看次数
标签 统计
cross-browser ×10
css ×7
html ×3
javascript ×3
css3 ×2
safari ×2
svg ×2
angularjs ×1
browser ×1
caching ×1
crossrider ×1
firefox ×1
flexbox ×1
include ×1