因此,在尝试使用flexbox创建一个有用的模式时,我发现了什么似乎是一个浏览器问题,我想知道是否有一个已知的修复或解决方法 - 或者如何解决它的想法.
我想解决的问题有两个方面.首先,使模态窗口垂直居中,这可以按预期工作.第二个是让模态窗口滚动 - 外部,所以整个模态窗口滚动,而不是其中的内容(这样你就可以有下拉列表和其他可以扩展到模态边界之外的UI元素 - 像自定义日期选择器等)
但是,当将垂直居中与滚动条组合时,模态的顶部在开始溢出时可能无法进入.在上面的示例中,您可以调整大小以强制溢出,这样做可以让您滚动到模态的底部,但不能滚动到顶部(第一段被截断).
这是示例代码的链接(高度简化)
https://jsfiddle.net/dh9k18k0/2/
.modal-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
overflow-x: auto;
}
.modal-container .modal-window {
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// Optional support to confirm scroll behavior makes sense in IE10
//-ms-flex-direction: column;
//-ms-flex-align: center;
//-ms-flex-pack: center;
height: 100%;
}
.modal-container .modal-window .modal-content {
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
width: 100%;
max-width: 500px; …在客户端站点上使用泰语文本的情况是我们无法控制特定单词/句子在行之间断开的位置(Web浏览器将如何处理它).通常,本地审阅者表示内容外观不正确.
解决
这个问题的方法是,撰稿人需要提供包含破坏​和不间断的零宽度空间字符的泰语内容.
在实践中,而不是:
?????????? ??????????????
我们应该使用丑陋的东西:
??????????​???​???????????
以上只是一个例子,我真的不知道断点的确切位置.
实际上,单独的非零破坏空间也可以做到这一点......使用破碎的零空间以及更高的准确性更加严格和正确.
虽然它确实是可行的,但它对于大型网站内容管理来说也是一个耗时且不是非常有效的解决方案.简单地说,投入的努力与所需的效果不相符.
到目前为止的研究已经导致了所提到的解决方法,寻找更好的方法来处理这个问题.甚至W3C还没有解决方案,只是讨论它是否应该成为CSS3规范的一部分.
泰语很少使用空间,主要用于区分句子等.因此,泰语句子的常见外观是一个looong字符串.当更多行文本放在一起时,在哪里打破这样的字符串由特定的单词标识确定.对于单词识别,使用本地词典,这些词典很可能是操作系统或Web浏览器的一部分,我不完全确定这些.
显然,您检查的Web浏览器/操作系统越多,您获得的结果就越多!此外,由于它是系统驱动的,并且没有"在哪里打破泰国"设置,因此您无法做到这一点.
使用<wbr/>,​或­以指示断点真的是不会阻止的网页浏览器的思想(即使是错误的),一些休息也是可能的地方,在这里你还没有一个字的中间定义他们如这可能是语法上不正确.
如果将这样的单词放在一行的末尾(取决于屏幕分辨率,复制长度,定义的CSS规则),并且浏览器在其上应用了错误的换行规则,那么最终会出现泰语断行问题,无论如何你已经在单词之前,之后或其他地方定义了另一个断点 - 浏览器将始终使用他认为最接近EOL的断点,而不仅仅是你通过在标记中插入一个提到的字符而轻轻建议的断点.
这就是为什么你真的需要专注于不打破文本的地方(不打破零宽度空间),而不是它允许的地方.这就是我们回到上面"解决方法"部分中的丑陋和长标记示例的原因.这样一个换行符只能在你允许它的地方发生,但它很麻烦.
任何其他解决方案 如何更有效地处理这一点将不胜感激......谁知道,它甚至可能帮助W3C实施？
谢谢!
运行以下代码块时,typeof(hiya) = string在IE7/8输出时输出FF和Chrome typeof(hiya) = undefined.
<html>
<body>
<script type="text/javascript">
window.hiya = 'hiya';
</script>
<script type="text/javascript">
if( false ) {
var hiya = 1;
}
document.write( "typeof(hiya) = "+ typeof(hiya) );
</script>
</body>
</html>
以下每个问题都会消失:
<script>块中.if块.var hiya = 1为var hiya2 = 1.var hiya = 1为window.hiya = 1.var hiya = 1为hiya = 1.怎么了？IE中是否存在范围错误？
我已经看到大多数没有^(circumflex)和$(货币或美元)字符的例子来标记匹配字符串的结尾.但是,我在html5规范中没有找到任何相关内容.它们隐含在模式中吗？html5规范声明它们是隐含的.
编译后的模式正则表达式在与字符串匹配时,必须将其开始锚定到字符串的开头,并将其结束锚定到字符串的结尾.这意味着用于此属性的正则表达式语言与JavaScript中使用的正则表达式语言相同,只是模式属性与整个值匹配,而不仅仅是任何子集(有点像它隐含了^(？:at start)模式和a)最后的$).
在type ="text"输入中,模式使用任一格式都可以正常工作,但是在type ="tel"输入中,我必须删除正则表达式的字符才能按预期工作.我已经在Opera和Firefox中进行了测试.
这是一个浏览器错误吗？我应该在bugzilla等中提交错误吗？
编辑:似乎我偶然发现了一个奇怪的错误,因为我无法创建一个简化的测试用例.页面中的简单输入不会显示上述行为.但问题仍然存在.我应该,还是不应该使用darn ^和$ anchors？
短篇故事:
jsfiddle在这里.Chrome 21,Firefox 15和IE9中的行为一直是错误的,这让我觉得我对CSS规范有些误解.
更长的故事:
我想使用行高垂直居中图像.我已经设置图像容器等于行高的高度,我已经复位利润率,填充和边框所有元素,但是该图像是低于它应该是2个像素.无论图像是小于容器还是大于容器,都会发生这种情况(在这种情况下我习惯max-width: 100; max-height: 100%将其放大).
在两种情况下,图像具有偶数个像素.对于比容器小的图像,我不会那么在意,但对于较大的图像,容器背景中的2像素线将在图像的顶部渗透.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Images centered vertically with line-height have center miscalculated by 2 pixels</title>
<style type="text/css">
* { margin: 0; padding: 0; border: 0px solid cyan; } /* reset all margins, paddings and borders */
html {
font-size: 16px;
line-height: normal;
}
body {
line-height: 100%;
background: gray;
}
.img-wrapper-center {
width: 400px;
height: 200px; /* necessary, besides line-height, if images are taller than it …这是一个奇怪的错误,该网站在Safari中的所有浏览器都可以完美地运行(在5.1.7版中进行测试).这是我网站的链接.
http://www.enrista.co.za/new-swap/?page_id=1669
如果单击加号以打开窗口小部件区域,则可以看到我正在讨论的问题.文本和div不合适,直到窗口上的resize事件正常.我也注意到只有我的新闻信和社交媒体小部件才会出现问题.我尝试了其他小部件并让它正常工作.非常感谢这里的一些帮助,经过几个月的努力建立一个主题后,对这个错误感到失望.
在FF和Chrome中查看此演示,然后删除:
-webkit-transform:translateZ(0px);
Fom css,再看看Chrome.
它还使Chrome机身容器具有min-width:100%切割内容(并非总是如此).
我需要-webkit-transform:translateZ(0px);防止Chrome中出现奇怪的怪异黑盒子导致同时使用transformX + Y过多的元素.
我很惊讶无法找到记录浏览器CSS,HTML和Javascript错误的可靠资源.显然有像http://caniuse.com/和http://www.quirksmode.org/这样的网站从另一个方向采取措施,记录功能实现,有时注意到错误和部分实现的功能,但是有没有一个网站列出每个浏览器/浏览器版本的已知错误和变通方法？
我正在尝试复制客户端报告的错误,这是"这个脚本运行缓慢"的通知,它出现在IE中,因为它的JS/DOM解析非常慢.
这不会发生在我的虚拟机IE6(客户端有IE6)上也不会在我有的测试机器上运行(某些mac mini).
我可以保证发生了很多JS,并且在使用XHR检索后会处理大量的HTML,此外还有很多JS在附加的DOM元素上运行.我不可能发布整个脚本,但我相信我可以轻松地跟踪问题,但我想重现这个以优化它.
这是一个非常高调的客户端,所以我不能只是通过电话或IM与他们交谈.我有什么方法可以减慢我的机器速度,以重现这个错误？或者我应该坚持要求客户的计算机规格并尝试访问更有可能再现该问题的旧计算机？甚至使用像browsercam这样的东西？
我想到的另一个想法是,使JS操作更多,以便我确实得到问题并尝试优化我的代码,所以即使使用我的附加代码,它也不会发布脚本通知错误.
我很感激任何建议.
这是最奇怪的事情，我以前曾多次使用过这种方法，但现在它似乎对我来说不起作用。
这是一个重复的问题，提供了此方法作为答案：
但由于某种未知的原因，它在 Firefox 和 Chrome 中对我来说是崩溃的。据我所知，它是根据我应用样式的元素的父元素计算填充...
在这种情况下，它不会查看.test，而是查看.parent计算填充：
.parent {
width: 200px;
}
.test {
width: 50px;
background: red;
padding-top: 100%;
}<div class='parent'>
<div class='test'></div>
</div>我看到这个问题已经在IE9周围被问到,但是在html表的随机行中添加了额外的列.根问题似乎是在IE 10中修复的IE 9错误(但我有很多IE9用户)
它声明它通常发生在通过ajax构建的表中,但我在输出html表的常规页面上看到这一点.
有一个解决方法Javascript解决方案,但答案假定您正在构建一个使用Javascript的表(来自ajax调用).我正在使用局部视图(或者在某些情况下只是直接在单个页面上呈现常规格式化的html表)所以我想知道是否有一个解决方案可以在IE9上直接渲染直接html时阻止此UI问题页.
我想避免在我的实际代码中实际上没有空格,因为这将很难维护.
html internet-explorer html-table internet-explorer-9 browser-bugs
在下面的演示中，在锚标记上单击并按住 mousedown，然后将光标拖离，同时按住 mousedown，最后松开单击。您将在锚标记周围看到一个红色的虚线轮廓。现在，如果您按下 shift 键，轮廓将偏移几个像素。
a:focus {
outline: 1px dotted red;
}<a href="#">Click+hold, then release, then press shift key</a>该行为不会在按下ctrl或fn键等时发生，但会发生在大多数键上。这种行为似乎是跨浏览器兼容的，这让我思考：
我有一个网站:http://www.sucramma.dk 当我在FF,Chrome或Safari时,网站显示应该,但在IE中网站是左对齐的,并且正在运行是怪癖模式.为什么？doctype已设置好!
browser-bugs ×13
css ×8
html ×6
css3 ×2
javascript ×2
aspect-ratio ×1
browser ×1
center ×1
debugging ×1
flexbox ×1
html-table ×1
html5 ×1
image ×1
jquery ×1
regex ×1
responsive ×1
safari ×1
scope ×1
unicode ×1
validation ×1
w3c ×1