Рамка с уголком посредине в центре (less):
.block{
background:@color_white;
border:1px solid @color_gray;
.border_radius(5px);
padding:10px;
&:before,&:after{
content:'';
position:absolute;
left:50%;
margin-left:-10px;
top:-20px;
border:10px solid transparent;
border-bottom:10px solid @color_gray;
}
&:after{
border-bottom:10px solid @color_white;
top:-19px;
}
}
http://htmlbook.ru/blog/treugolniki-cherez-css
body{
-ms-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
Mobile Safari (а также Chrome для Android, Mobile Firefox и IE Mobile) автоматически увеличивают размер шрифта внутри широких блоков.
Минус этого решения:
Двойной тап по блоку больше не будет увеличивать его масштаб в рамках ширины экрана.
Если размер шрифта покажется пользователю слишком мелким, то ему придется увеличивать масштаб всей страницы и использовать свайп влево-вправо, чтобы читать текст.
https://ru.stackoverflow.com/questions/382661/Почему-ios-safari-увеличивает-шрифт
Чтобы убрать закругленные углы и другие стандартные стили Safari:
-webkit-appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
В примере таблицы в контенте расположены внутри тега article
$(document).ready(function(){
$(".article table").wrap('<div class="content_table"></div>');
});
article .content_table{
overflow-x:auto;
}